React Tag component, universal tag
render, like the normal HTML <tag>
but useful.
- ✅ stateless
- ✅ 0 dependency
- ✅ without invade, works well with normal tags
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.
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>
)
}
}
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>
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>
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: