Introduction

This React component library provides lightweight, high-performance primitive building blocks for constructing themeable design system components. The source code can be found on github and published to the @intouchg NPM scope.

This library uses styled-components and styled-system under the hood. You should be familiar with the styled-components API to use this library to the fullest extent. Conceptually, the components in this library can be split into two categories:

Layout components render basic HTML content like a div, span, or button. These components are responsible for styling the UI. Most of the components in this library are layout components, and all layout components share common and advanced APIs for styling.

HelloWorld
<Flex
    padding={3}
    backgroundColor="Primary"
>
    <Text color="Secondary">
        Hello
    </Text>
    <Text color="Tertiary">
        World
    </Text>
</Flex>
<Flex
    padding={3}
    backgroundColor="Primary"
>
    <Text color="Secondary">
        Hello
    </Text>
    <Text color="Tertiary">
        World
    </Text>
</Flex>
Live Demo

Stateful components pass down state changes to their child layout components. It's up to the layout component to rerender based on that new state.

Here's an example using the Activatables stateful component. Notice how the Button layout component uses the active value passed down by the Activatable child component to render dynamic styles.

Click to toggle
<Activatables defaultActiveIds={[ '1' ]}>
    <Activatable id="1">
        {({ active, toggleActive }) => (
            <Button
                invisible
                fontSize="2rem"
                color={active ? 'Primary' : 'Secondary'}
                transform={`scale(${active ? 1.2 : 1})`}
                transition="all 300ms ease-in-out"
                onClick={toggleActive}
            >
                Click to toggle
            </Button>
        )}
    </Activatable>
</Activatables>
<Activatables defaultActiveIds={[ '1' ]}>
    <Activatable id="1">
        {({ active, toggleActive }) => (
            <Button
                invisible
                fontSize="2rem"
                color={active ? 'Primary' : 'Secondary'}
                transform={`scale(${active ? 1.2 : 1})`}
                transition="all 300ms ease-in-out"
                onClick={toggleActive}
            >
                Click to toggle
            </Button>
        )}
    </Activatable>
</Activatables>
Live Demo

Next you'll see how to get started with the component library and build a basic UI.