shouldForwardProp

Prevent style-props leaking through to the DOM

import { shouldForwardProp } from 'jynx'

The shouldForwardProp utility is a helper function that prevents jynx's style-props from leaking through to the DOM. It's modelled on the implementation suggested in the styled-components docs and helps to keep React happy with clean, semantic html elements.

Usage

To use the shouldForwardProp utility, chain the withConfig method to your component declaration and include shouldForwardProp in your argument object.

/* Import the `shouldForwardProp` utility along with any required functions */
/* and their corresponding props types */
import { color, ColorProps, shouldForwardProp } from 'jynx'


/* Then create a component, chaining to it the `withConfig` method, */
/* and including `shouldForwardProp` in your argument object */
export const Component = styled('div').withConfig<ColorProps>({ shouldForwardProp })`
  ${color}
`

/* Or using the legacy functional syntax */
export const Component = styled('div').withConfig<ColorProps>({ shouldForwardProp })(props => `
    ${color}
  `)

How it works

The utility works similarly to Array.filter, testing a given value against a condition and then returning a boolean value accordingly. A value that fails the test will cause the function to return false and the corresponding prop will not be passed down to the underlying component.

The test itself takes a prop as an argument and checks whether it exists in an array containing all the possible style-props. If the argument does exist within the array then the condition returns false and the prop is not passed on to the underlying component.

const shouldForwardProp = (prop: any): boolean =>
  !Object.keys({
    ...animationConfig,
    ...backgroundConfig,
    ...borderConfig,
    ...colorConfig,
    ...extendedFlexboxConfig,
    ...extendedGridConfig,
    ...flexboxConfig,
    ...gridConfig,
    ...layoutConfig,
    ...positionConfig,
    ...shadowConfig,
    ...spaceConfig,
    ...transitionConfig,
    ...typographyConfig
  }).includes(prop)