@rebeldotcom/components

Rebel Web Components

React components with a focus on Simplicity and Accessibility

What’s In This Document

• Dependencies
• Installation
• Usage
• The Theme
• The Components, Providers and Hooks
• License

Dependencies

This React component library leverages Styled Components and Styled System as well as a few other key packages. In order to keep this package light and simple, we don't include them as main dependecies but rather as peerDependencies

They make our lives easier, but you'll have to make sure your own project includes them as well.

• react and react-dom
• styled-components
• styled-system
• styled-normalize
• styled-reset

Local Development - Getting Started

npm install
npm link
npm run start - builds and watches files for changes

  or 

npm run build - only builds

New Project Installation

npm install --save react react-dom styled-components styled-system styled-normalize styled-reset @rebeldotcom/components

or

yarn add react react-dom styled-components styled-system styled-normalize styled-reset @rebeldotcom/components

Usage

All of our components and providers are exported by name from @rebeldotcom/components, so you can import them with:

import {
  Box,
  Button,
  Heading,
  Input,
  ThemeProvider,
  GlobalStyle,
} from '@rebeldotcom/components'

Rebel Components are built using styled-components and styled-system alongside a provided theme.

In order to use the components, you'll have to bring in the <ThemeProvider> and <GlobalStyles> into your project to wrap your UI elements.

Example

import React from "react";
import {
  Box,
  Button,
  Heading,
  Input,
  ThemeProvider,
  GlobalStyle
} from "@rebeldotcom/components";

const App = () => {
  return (
    <ThemeProvider>
      <GlobalStyle />
      <Box height="100vh" justifyContent="center" alignItems="center">
        <Box border={1} p={3} borderRadius="large" flexDirection="column">
          <Heading as="h1">My App here</Heading>
          <Input id="email" label="email address" />
          <Button
            id="click-me"
            onClick={() => console.log("clicked me")}
            ariaLabel="Click Me"
          >
            Click Me
          </Button>
        </Box>
      </Box>
    </ThemeProvider>
  );
};

export default App;

License

Licensed under the MIT License.