https://github.com/rwu823/react-tag

Universal tag render, like the normal HTML <tag> but useful
https://github.com/rwu823/react-tag

Last synced: about 1 month 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 8 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T14:45:32.000Z (about 1 year ago)
• Last Synced: 2024-11-06T07:47:52.594Z (about 2 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

        
[![version](https://img.shields.io/npm/v/react-tag.svg?label=version)](https://www.npmjs.org/package/react-tag) [![download](https://img.shields.io/npm/dm/react-tag.svg)](https://www.npmjs.org/package/react-tag) [![codeship](https://img.shields.io/codeship/5c0e0520-e293-0133-a7f8-2e7ba760e325/master.svg)](https://codeship.com/projects/145633) [![Coverage](https://img.shields.io/coveralls/rwu823/react-tag.svg)](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

```