blacklist-tag

Simple library that will allow you to omit properties from tags. It can be used with any component or tag but the original intent was for use with styled components.

Inspired by by Brent Jackson's clean-tag

import tag from 'blacklist-tag'
import styled from 'styled-components'
 
const H1 = tag('h1', ['color'])
 
const Greeting = styled(H1)`
  color: ${props => props.color === 'primary' ? 'red' : 'black' };
  backgroud: ${props => props.color === 'primary' ? 'black' : 'none' };
  text-transform: capitalize;
  font-size: 4rem;
`

or

const Greeting = styled(tag.h1(['color']))`
  color: ${props => props.color === 'primary' ? 'red' : 'black' };
  backgroud: ${props => props.color === 'primary' ? 'black' : 'none' };
  text-transform: capitalize;
  font-size: 4rem;
`

Now <Greeting color='primary'>Hello, world!</Greeting> will not render the h1 tag with color in the dom element's props.