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

importBasefrom'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'importstyledfrom'react-emotion'importBasefrom'react-styled-base'constLinkComp=styled(Base)` color: ${props=>props.foo==='bar' ? 'royalblue' : 'hotpink'};`render((<LinkCompas='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'importstyledfrom'react-emotion'import{LinkasRouterLink}from'react-router-dom'import{createBase}from'react-styled-base'constLinkComp=styled(createBase('span'))` color: ${props=>props.foo==='bar' ? 'royalblue' : 'hotpink'};`constRouterLinkBase=createBase(RouterLink,{tagName: 'a',whitelist: ['to']})constCustomComp=createBase((props)=><span{...props}/>,{isPropValid: (tag,prop)=>prop!=='foo'})render((<span><LinkCompas={RouterLinkBase}to='/page-2'foo='bar'>
Page 2
</LinkComp><LinkCompas='a'href='https://google.com'target='_blank'foo='baz'>
Search
</LinkComp><CustomComptitle='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')// → falseisPropValid('bar','a')// → falseisPropValid('href','a')// → true

💁‍♂️ Alternative

• clean-element — Use component prop-types as blacklist

🔗 Links

• ⚠️Unknown Prop Warning
• 💬 Separate HTML attributes from styling props
• 💄 pss — Prop Styles System
• 📐 pss-components — Components
• 💄 glamorous — Inspired by
• 👩‍🎤 @emotion/is-prop-valid — Approach used inside emotion and styled-components

---

MIT © John Grishin