Namibian Pyjama Merchant

    clean-element

    1.1.0 • Public • Published

    clean-element

    npm i clean-element

    Styled-components and other libraries attempt to remove invalid HTML attributes from props using a whitelist, but do not remove width, fontSize, color, or other valid HTML attributes when used as props.

    To ensure that style props are not passed on to the underlying DOM element, even in cases where a prop is a valid HTML attribute, like width or align, use the cleanElement higher order component to create a base component that remove props defined in propTypes.

    import styled from 'styled-components'
    import { textAlign, propTypes } from 'styled-system'
    import cleanElement from 'clean-element'
     
    const CleanDiv = cleanElement('div')
     
    // props that are defined as propTypes are removed
    CleanDiv.propTypes = {
      ...propTypes.textAlign
    }
     
    const Box = styled(CleanDiv)`
      ${textAlign}
    `
     
    // <Box align='center' />
    // `align` prop is picked up by styled-components,
    // but not passed on to the HTML element

    Manually omitting props

    As an alternative to using the cleanElement function, removing style props from styled-components can be done manually, with a more React-like approach.

    import React from 'react'
    import styled from 'styled-components'
    import { width, color } from' styled-system'
     
    const Box = styled(({
      width,
      color,
      bg,
      ...props
    }) => <div {...props} />)`
      ${width}
      ${color}
    `

    See this discussion for more information: https://github.com/styled-components/styled-components/issues/439


    Related


    MIT License

    Install

    npm i clean-element

    DownloadsWeekly Downloads

    501

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    6.83 kB

    Total Files

    6

    Last publish

    Collaborators

    • jxnblk