react-styled-base

Base component that prevents rendering unknown props in DOM

Usage no npm install needed!

<script type="module">
  import reactStyledBase from 'https://cdn.skypack.dev/react-styled-base';
</script>

README

react-styled-base

Base component that prevents rendering unknown props in DOM

  • Filter unknown props from DOM
  • Based on react-html-attributes (50% smaller - 3kb when minified / 1kb gziped, without many deprecated attributes & elements)
  • Override inner element with as prop
  • Great for CSS-in-JS component libraries (NOTE: some provide this feature out of box!)

📦 Install

$ yarn add react-styled-base

📖 API

Base component

import Base from 'react-styled-base'

Props

  • as: Component — React component or DOM element (like div, input, span, ...), default div

See createBase for more options.

Example

import { render } from 'react-dom'
import styled from 'react-emotion'
import Base from 'react-styled-base'

const LinkComp = styled(Base)`
  color: ${props => props.foo === 'bar' ? 'royalblue' : 'hotpink'};
`

render((
  <LinkComp as='a' href='http://example.com' foo='bar' abc='xyz'>
    Click Me
  </LinkComp>
), document.body)

// → 
// <a class="css-0" href="http://example.com">Click Me</a>

createBase factory

import { createBase } from 'react-styled-base'

Params

  • defaultComp: Component — React component or DOM element (like div, input, span, ...), default div
  • options: Object — (Optional, default to { componentProp: 'as' })
    • options.whitelist: Array — List of props that always will be rendered (optional)
    • options.blacklist: Array — List of props that always be be omitted (optional)
    • options.isPropValid: function (tagName, propName) => boolean — Custom function to filter props
    • options.tagName: string — DOM element. Used when defaultComp is not DOM element (optional)

Return: Component — wrapped in React.forwardRef.

Example

import { render } from 'react-dom'
import styled from 'react-emotion'
import { Link as RouterLink } from 'react-router-dom'
import { createBase } from 'react-styled-base'

const LinkComp = styled(createBase('span'))`
  color: ${props => props.foo === 'bar' ? 'royalblue' : 'hotpink'};
`

const RouterLinkBase = createBase(RouterLink, {
  tagName: 'a',
  whitelist: [ 'to' ]
})

const CustomComp = createBase((props) => <span {...props} />, { 
  isPropValid: (tag, prop) => prop !== 'foo' 
})

render((
  <span>
    <LinkComp as={RouterLinkBase} to='/page-2' foo='bar'>
      Page 2
    </LinkComp>
    <LinkComp as='a' href='https://google.com' target='_blank' foo='baz'>
      Search
    </LinkComp>
    <CustomComp title='notice' foo='bar'>
      Notice
    </CustomComp
  </span>
), document.body)

// →
// <span>
//   <a class="css-0" href="/app/page-2">Page 2</a>
//   <a class="css-1" href="https://google.com" target="_blank">Search</a>
//   <span title="notice">Notice</span>
// </span>

isPropValid function

import { isPropValid } from 'react-styled-base'

Params

  • propName: string — prop name (like href, value, onChange)
  • tagName: string — DOM element (like a, input, div)

Return: boolean

Example

import { isPropValid } from 'react-styled-base'

isPropValid('foo', 'a') // → false
isPropValid('bar', 'a') // → false
isPropValid('href', 'a') // → true

💁‍♂️ Alternative

🔗 Links


MIT © John Grishin