@exah/react-base-component NPM

⚾️ 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

`Base` component

import Base from '@exah/react-base-component'

Props

as: Component — React component or DOM element (like div, input, span, ...), default div
asTagName: string - DOM element used when React component passed to as 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>

`createBase` factory

import { createBase } from '@exah/react-base-component'

Params

defaultComp: Component — React component or DOM element (like div, input, span, ...), default div
options: Object — Options, 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
options.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>

`isPropValid` function

import { isPropValid } from '@exah/react-base-component'

Params

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

Return: boolean

Example

import { isPropValid } from '@exah/react-base-component'

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