https://github.com/rwu823/react-tag
Universal tag render, like the normal HTML <tag> but useful
https://github.com/rwu823/react-tag
Last synced: 3 months ago
JSON representation
Universal tag render, like the normal HTML <tag> but useful
- Host: GitHub
- URL: https://github.com/rwu823/react-tag
- Owner: rwu823
- Created: 2016-04-10T14:10:17.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T14:45:32.000Z (over 1 year ago)
- Last Synced: 2025-04-13T21:17:43.326Z (3 months ago)
- Language: JavaScript
- Homepage: https://github.com/rwu823/react-tag
- Size: 238 KB
- Stars: 30
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.org/package/react-tag) [](https://www.npmjs.org/package/react-tag) [](https://codeship.com/projects/145633) [](https://coveralls.io/github/rwu823/react-tag)
# React Tag
React Tag component, universal `tag` render, like the normal HTML `` 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:
```js
render() {
const style = {
display: show ? '' : 'none'
}
return (
)
}
```
And we always dynamically `add` or `remove` classes inconvenient.
or using the [JedWatson/classnames](https://github.com/JedWatson/classnames)
```js
const classNames = require('classnames')
render() {
const css = {
foo: true,
bar: false
}
return (
)
}
```
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:
```js
import {Div, Img, P, H1, Button} form 'react-tag'
render() {
return (
)
}
```
output:
```html
```
Let yourself Component extends `React Tag`'s power
```js
import {Div} from 'react-tag'
class YourComponent extends Component {
render() {
return (
)
}
}
```
## props
### show
Dynamically show the div
```js
import {Div} from 'react-tag'
render() {
return
This is Dev Component
}
```
output:
```html
This is Dev Component
```
### css
Dynamically toggle css classes
```js
import {Div} from 'react-tag'
render() {
const css = {
foo: true,
bar: false
}
return
}
```
output:
```html
```
### hide
Dynamically hide the div.
Sometime we don't want to render DOM, you can hide it by passing a `hide` props:
```js
import {Div} from 'react-tag'
render() {
return
}
```
output nothing:
```html
```