Fixture Inputs

The following APIs allow you manipulate components visually by defining fixture inputs in the Control Panel.

useFixtureInput

import { useFixtureInput } from 'react-cosmos/client';
 
export default () => {
  const [count, setCount] = useFixtureInput('count', 0);
 
  return <CounterButton count={count} increment={() => setCount(count + 1)} />;
};

The useFixtureInput hook can be used with any type of serializable data, like strings, numbers and booleans, including objects and arrays.

Number inputs

While focused on number inputs you can use the up and down arrow keys to increment and decrement the value. Hold ⎇ for .1 increments, ⇧ for 10 increments, and ⌘ for 100 increments.

Boolean inputs

The Boolean Input Plugin can be installed to turn boolean inputs into checkboxes.

useFixtureSelect

import { useFixtureSelect } from 'react-cosmos/client';
 
export default () => {
  const [buttonType] = useFixtureSelect('buttonType', {
    options: ['primary', 'secondary', 'danger'],
  });
 
  return <Button type={buttonType}>Press me</Button>;
};

useFixtureSelect also returns a setter as the second value in the return tuple, like the useState hook, in case you want to change the value programatically.

Option groups

You can group options by passing an array of objects with group and options properties.

const [color] = useFixtureSelect('color', {
  options: [
    { group: 'warm', options: ['red', 'orange', 'yellow'] },
    { group: 'cold', options: ['blue', 'green', 'purple'] },
  ],
});