React Property Controls

Components for rendering React component playgrounds.

Example

import {
  makeControls,
  stringType,
  numberType,
  boolType
} from '@wayfair/react-property-controls';
// Could be local inputs to your project, or some UI library from NPM
import {TextInput, NumberInput, Toggle} from '../component-library';

function MyComponent({priceLabel, price, hidePriceLabel}) {
  return (
    <span>
      This product costs: {hidePriceLabel ? null : priceLabel}
      {price}
    </span>
  );
}

// Define your controls for the component
// these are like prop-types for the component, but allow you to specify additional
// data for the rendered inputs
// In this case we specify a label for our inputs for each control, as well as some defaultValues
const controls = {
  priceLabel: {
    type: stringType,
    label: 'The price label (i.e. $) of the product',
    isHidden(props) {
      // props.state is our control state coming from the StateContainer component
      return !!props.state.hidePriceLabel;
    },
    defaultValue: '$'
  },
  price: {
    type: numberType,
    label: 'The price of the product',
    defaultValue: 0
  },
  hidePriceLabel: {
    type: boolType,
    label: 'If the price label should be hidden',
    defaultValue: false
  }
};

const {PropertyControls, values} = makeControls({
  controls,
  StringInput: TextInput,
  NumberInput,
  BoolInput: Toggle
});

// Simple state container
class StateContainer extends React.Component {
  state = values;
  update = name => value => this.setState({[name]: value});
  render() {
    return this.props.children({
      state: this.state,
      update: this.update
    });
  }
}
// Render controls and the component
ReactDOM.render(
  <StateContainer>
    {({state, update}) => (
      <React.Fragment>
        <PropertyControls state={state} update={update} />
        <MyComponent {...state} />
      </React.Fragment>
    )}
  </StateContainer>
);

API

For more information on the API of this package, refer to the documentation in the docs directory.

Development Guide

If you are working on this project locally here are the steps you can follow to setup the package:

1. clone the repo
2. npm install the dependencies
3. cd sandbox and npm install
4. npm run build to build the library to the dist directory (you should only need to run this once, the script will watch for changes to the src directory)
5. npm run test to run tests

To test your changes locally within the sandbox, you will need to link the package locally and then install it from the link:

# in the root directory
npm run build-once
npm link
cd ./sandbox
npm link @wayfair/react-property-controls