3oilerplate v0.3.5

3oilerplate

Personal React Component Library and Toolkit. With a wrapper around Styled Components that brings Styled System's theming magic into components.

• Declare component styles and variants with theme values
• Override component styles with the style prop
• Override component styles or add variants in the theme object
• Override styles of child elements of components by using the sRef prop

Installation

npm install 3oilerplate

How to use

Wrap your application in a ThemeProvider:

import { ThemeProvider, Text } from '3oilerplate'
import theme from './style/theme'

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Text>Hello world</Text>
    </ThemeProvider>
  )
}

Define a theme

import { darken } from '3oilerplate'

const theme = {
  breakpoints: ['320px', '640px', '768px', '1024px', '1440px'],
  space: {
    xs: '0.5rem',
    s: '0.75rem',
    m: '1.25rem',
    l: '2.5rem',
    xl: '3.75rem',
  },
  colors: {
    primary: '#3e64ff',
    primaryDark: darken('#3e64ff', 0.25),
    secondary: '#7c73e6',
    secondaryDark: darken('#7c73e6', 0.25),
  },
  fonts: {
    base: "'Source Sans Pro', Helvetica, Arial, sans-serif",
    code: 'Consolas, Monaco, monospace, Arial, sans-serif',
  },
  radii: {
    s: '0.125rem',
    m: '0.25rem',
    l: '0.5rem',
  },
}

Define components

Define components with the styled wrapper.

import { styled } from '3oilerplate'

const Button = styled.button({
    backgroundColor: 'primary',
    color: 'white',

    ':hover': {
      backgroundColor: 'primaryDark',
    },
  },
  {
    isSecondary: {
      backgroundColor: 'secondary',

      ':hover': {
        backgroundColor: 'secondaryDark',
      },
    },
  },
  'Button',
})

Use your custom components or components from this library

import { Container } from '3oilerplate'
import { Text } from '@components'

const HelloWorldComponent = () => {
  return (
    <Container>
      <Text>Hello World</Text>
    </Container>
  )
}

Variant Styles

Variants are applied when you pass a prop with a true value that matches the name of a variant.

<Button isSecondary />

Variants can be defined in the component declaration as showed before, but also in the theme configuration.

const theme = {
  ...,
  components: {
    Button: {
      default: {
        backgroundColor: 'secondary',
      },
      variants: {
        isOutline: {
          background: 'transparent',
          borderColor: 'secondary',
        },
      },
    },
  },
}

Inline Styles

Each component has a style prop you can pass inline styling to.

<Button s={{ backgroundColor: 'secondary' }} />

Components with children

When you use the ref field when defining components.

You can apply inline styling to children of containing components:

<Checkbox
  s={{
    borderColor: 'secondary',
    Checkbox_Indicator: { backgroundColor: 'secondary' },
  }}
/>

You can also apply styling to a component's children in the theme configuration:

const theme = {
  ...,
  components: {
    Checkbox: {
      default: {
        borderColor: 'secondary',
        Checkbox_Indicator: { backgroundColor: 'secondary' },
      },
    },
  },
}