noderaider / react-sand

A component that wraps your component and allows it to be controlled in-browser.

Demo your components abilities. A simple component that wraps your components and gives component inputs to adjust their props.

❗ Demo at gridiron.js.org (each component is wrapped with to allow playing with it)

---

Usage

import React, { Component, PropTypes } from 'react'
import sand from 'react-sand'

const Sand = sand({ React })

class FancyComponent extends Component {
  static propTypes = (
    { stringProp: PropTypes.string
    , numberProp: PropTypes.number
    , comboProp: PropTypes.oneOf([ 'foo', 'bar' ])
    }
  );
  render() {
    // RENDER SOMETHING
  }
}

export default props => (
  <Sand Box={FancyComponent}>
    <span>Some children</span>
  </Sand>
)

Output

In the example above you will see the FancyComponent rendered within a sandbox containing controls to alter its props in the browser.

^{Note: Under active development. This is not done yet. Pull requests welcome!}