Axelra React Utilities

This package provides utility components when building React projects with styled-components.

Usage

Use the default ThemeProvider of styled-components to wrap your application (e.g. in _app.js when using Next.js). Create and customize a theme using makeTheme.

import {makeTheme} from 'axelra-react-utilities';

// Check reference config object for all available confiugrattion possibilities.
const theme = makeTheme({spacing: 10});

<ThemeProvider theme={theme}>
    // ...
</ThemeProvider>

Customize Theme

The following object represents a complete list of all possible customizations. All values can be adapted, but it is not possible to add additional keys (e.g. fontSize xxl)

const config = {
    spacing: 8,
    breakPoints: {
        sm: 640,
        md: 768,
        lg: 1024,
        xl: 1280,
        xxl: 1536,
    },
    fontSizes: {
        xs: {
            size: "0.75rem",
            lineHeight: "1rem",
        },
        sm: {
            size: "0.875rem",
            lineHeight: "1.25rem",
        },
        base: {
            size: "1rem",
            lineHeight: "1.5rem",
        },
        lg: {
            size: "1.125rem",
            lineHeight: "1.75rem",
        },
        xl: {
            size: "1.25rem",
            lineHeight: "1.75rem",
        },
        "2xl": {
            size: "1.5rem",
            lineHeight: "2rem",
        },
        "3xl": {
            size: "1.875rem",
            lineHeight: "2.25rem",
        },
        "4xl": {
            size: "2.25rem",
            lineHeight: "2.5rem",
        },
        "5xl": {
            size: "3rem",
            lineHeight: "normal",
        },
        "6xl": {
            size: "3.75rem",
            lineHeight: "normal",
        },
        "7xl": {
            size: "4.5rem",
            lineHeight: "normal",
        },
        "8xl": {
            size: "6rem",
            lineHeight: "normal",
        },
        "9xl": {
            size: "8rem",
            lineHeight: "normal",
        },
    },
}

Components

Responsive Spacer

Use this component to add space. It uses multiplieres of the spacing variable in combination with the defined breakPoints.

<ResponsiveSpacer x={4} sm={6} lg={8}/>

Text

The Text component is a generic component which provides different typography combinations.

    <Text center block size={"7xl"} weight={"Bold"} color={"#ff0000"}>Your Text here</Text>

It is also possible to further adapt the Text component using styled-components

const MyText = styled(Text).attrs({center: true, size: "2xl"})`
    padding-bottom: 8px
`;

Max Width Container

The <MaxWidthContainer/> boxes the layout based on the configured breakpoints. It sets the max-width of an element to match the min-width of the current breakpoint