React Tag

React Tag component, universal tag render, like the normal HTML <tag> but useful.

• ✅ stateless
• ✅ 0 dependency
• ✅ without invade, works well with normal tags

Why?

When you want to show or hide a div, you probably do this everytime:

render() {
  const style = {
    display: show ? '' : 'none'
  }
  return (
    <div style={style} />
  )
}

And we always dynamically add or remove classes inconvenient.

or using the JedWatson/classnames

const classNames = require('classnames')
render() {
  const css = {
	foo: true,
	bar: false
  }
  return (
    <div className={`a b c ${classNames(css)}`} />
  )
}

Today you can stop doing that. React Tag is your new friend.

Examples

In React Tag each normal HTML tag will becomes uppercase of first letter, you can import for need:

import {Div, Img, P, H1, Button} form 'react-tag'
render() {
  return (
    <Div>
      <P />
      <H1 />
    </Div>
  )
}

output:

<div>
  <p></p>
  <h1></h1>
</div>

Let yourself Component extends React Tag's power

import {Div} from 'react-tag'
class YourComponent extends Component {
  render() {
    return (
      <Div {...this.props}>

      </Div>
    )
  }
}

props

show

Dynamically show the div

import {Div} from 'react-tag'
render() {
  return <Div show={false} style={{color: 'red'}}>This is Dev Component</Div>
}

output:

<div style="color: red; display: none;">This is Dev Component</div>

css

Dynamically toggle css classes

import {Div} from 'react-tag'

render() {
  const css = {
    foo: true,
    bar: false
  }
  return <Div className="a b" css={css} />
}

output:

<div class="a b foo"></div>

hide

Dynamically hide the div.

Sometime we don't want to render DOM, you can hide it by passing a hide props:

import {Div} from 'react-tag'
render() {
  return <Div hide={true} />
}

output nothing: