Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-div with all npm packages installed. Try it out:

var reactDiv = require("react-div")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-div v1.0.5

React Div component, like normal <div/> but better

No longer works, please transform to react-tag

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

codeshipcodecov

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:


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free