@styled-system/should-forward-prop

What is @styled-system/should-forward-prop?

@styled-system/should-forward-prop is a utility for styled-components and emotion that helps filter out props that should not be passed to the DOM element. This is particularly useful when working with styled-system, as it allows you to forward only the necessary props to the styled component, avoiding React warnings and potential issues with invalid HTML attributes.

What are @styled-system/should-forward-prop's main functionalities?

Filtering Props

This feature allows you to filter out props that should not be passed to the DOM element. In this example, the `Box` component will only forward the `margin` and `color` props to the styled component, ensuring that other props are not passed to the DOM.

const shouldForwardProp = require('@styled-system/should-forward-prop');

const Box = styled('div').withConfig({
  shouldForwardProp
})`
  ${space}
  ${color}
`;

<Box margin='16px' color='blue' />

Custom Prop Filtering

This feature allows you to define custom logic for filtering props. In this example, the `CustomBox` component will not forward the `customProp` to the DOM element, but will forward the `margin` and `color` props.

const customShouldForwardProp = (prop) => prop !== 'customProp';

const CustomBox = styled('div').withConfig({
  shouldForwardProp: customShouldForwardProp
})`
  ${space}
  ${color}
`;

<CustomBox customProp='value' margin='16px' color='blue' />

Other packages similar to @styled-system/should-forward-prop

styled-components

styled-components is a library for React and React Native that allows you to use component-level styles in your application. It provides a similar functionality to @styled-system/should-forward-prop through its `shouldForwardProp` API, which can be used to filter props that should not be passed to the DOM element.

@emotion/is-prop-valid

@emotion/is-prop-valid is a utility that checks if a prop is valid for a specific HTML element. It can be used in conjunction with emotion's styled components to filter out invalid props, similar to how @styled-system/should-forward-prop works.

polished

polished is a lightweight toolset for writing styles in JavaScript. While it does not provide direct prop filtering, it offers a variety of utilities for working with styles in a way that complements styled-components and emotion, which can be used alongside prop filtering utilities.

README

@styled-system/should-forward-prop

Utility for filtering Styled System props with Emotion's shouldForwardProp option

npm i @styled-system/should-forward-prop

import styled from '@emotion/styled'
import {
  space,
  color,
  typography
} from 'styled-system'
import shouldForwardProp from '@styled-system/should-forward-prop'

const Box = styled('div', { shouldForwardProp })(
  space,
  color,
  typography
)

Custom Props

To exclude other custom props not included in Styled System, use the createShouldForwardProp utility.

import styled from '@emotion/styled'
import { space, color } from 'styled-system'
import { createShouldForwardProp, props } from '@styled-system/should-forward-prop'

const shouldForwardProp = createShouldForwardProp([
  ...props,
  'd',
  'x'
])

const Box = styled('div', {
  shouldForwardProp
})(props => ({
  display: props.d,
  fontWeight: props.x ? 'bold' : null,
}),
  space,
  color
)

MIT License