README
βΎοΈ react-base-component
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 svg attributes and event handlers) - Override inner element with
as
prop - Great for CSS-in-JS component libraries (NOTE: some provide this feature out of box!)
- Light version with only custom whitelist / blacklist (soon)
- Better package name (open for discussion)
- Remove old and deprecated html attributes (open for discussion)
π¦ Install
$ yarn add @exah/react-base-component
π API
component Base
import Base from '@exah/react-base-component'
Props
as: Component
β React component or DOM element (likediv
,input
,span
, ...), defaultdiv
asTagName: string
- DOM element used when React component passed toas
prop
See createBase
for more options.
Example
import { render } from 'react-dom'
import styled from 'react-emotion'
import Base from '@exah/react-base-component'
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>
factory createBase
import { createBase } from '@exah/react-base-component'
Params
defaultComp: Component
β React component or DOM element (likediv
,input
,span
, ...), defaultdiv
options: Object
β Options, optional, default to{ componentProp: 'as' }
options.whitelist: Array
β List of props that always will be rendered, optionaloptions.blacklist: Array
β List of props that always be be omitted, optionaloptions.isPropValid: function (tagName, propName) => boolean
β Custom function to filter propsoptions.tagName: string
β DOM element. Used whendefaultComp
is not DOM element, optionaloptions.componentProp: string
β Name of prop for changing underlying component, optional, default to'as'
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 '@exah/react-base-component'
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 class="css-1" title="notice">Notice</span>
// </span>
function isPropValid
import { isPropValid } from '@exah/react-base-component'
Params
tagName: string
β DOM element (likea
,input
,div
)propName: string
β prop name (likehref
,value
,onChange
)
Return: boolean
Example
import { isPropValid } from '@exah/react-base-component'
isPropValid('a', 'foo') // β false
isPropValid('a', 'bar') // β false
isPropValid('a', 'href') // β true
π Links
- β οΈ Unknown Prop Warning
- π
pss
β Prop Styles System - π
pss-components
β Components - π©βπ€
@emotion/is-prop-valid
β Inspired by
MIT Β© John Grishin