Generator object

The generator object is responsible for setting properties on components that include the generateProps function. It allows you to configure various properties that affect the behavior and appearance of the generated components. Please refer to the dedicated documentation page for the generator object to understand how to use and configure its properties effectively.

Generator example

import { flex, flexList } from './theme/utils'
import { colors, fonts } from './themeVariables'

export const generator = {
  namedProps: [
    { cssProp: 'color', list: colors },
    { cssProp: 'font-size', list: fonts.weights },
    { cssProp: 'text-align', list: { center: 'center', left: 'left', right: 'right' }, prefix: 'textAlign' }
  ],

  spaceProps: [
    { prop: 'padding', units: 'px' },
    { prop: 'margin', units: 'rem' }
  ],

  variableProps: [
    { cssProp: 'display', list: { hidden: 'none', visible: 'flex' }, name: 'visibility' },
    { helperFn: flex, list: flexList, name: 'flex' }
  ]
}

Then, just apply generateProps in a styled component:

import { generateProps } from 'styled-gen';
import styled from 'styled-components';

export const MyComp = styled.div`
  // your css...

  ${generateProps};
`;

Property types

The generator requires the configuration of three different types of properties. For detailed information on each property, please refer to the dedicated documentation pages listed below:

1. namedProps - are mainly "boolean" props or a from/upTo object.
   <MyComp $textAlignLeft />
2. spaceProps - are shorthand props for layout spacing like margin and padding.
   <MyComp $mt={2} $pl={{ md: 24, sm: 16, xs: 8 }} />
3. variableProps - are props that expect a non boolean value (string, number or a media query object with the same value types).
   <MyComp $visibility={{ md: 'visible', xs: 'hidden' }} />