react-div

No longer works, please transform to react-tag

https://www.npmjs.com/package/react-tag

React Div

Like the normal HTML <div/> but useful.

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 Div is your new friend.

Default Props

  static propTypes = {
    css: PropTypes.object,
    style: PropTypes.object,
    show: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
    hide: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
    className: PropTypes.string,
  }
 
  static defaultProps = {
    css: {},
    style: {},
    show: true,
    hide: false,
    className: ''
  }

Examples

show: dynamically show the div

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

output:

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

css: dynamically toggle css classes

const Div = require('react-div')
const css = {
    foo: true,
    bar: false
}
render() {
  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:

const Div = require('react-div')
render() {
  return <Div hide={true} />
}

output nothing: