Documentation
Fixture Inputs

Fixture Inputs

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

Prop inputs are created automatically for Node fixtures in the Cosmos UI. This enables you to tweek component props and see the result in real time without any configuration.

useFixtureInput

CounterButton.fixture.jsx
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

Button.fixture.jsx
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'] },
  ],
});

useFixtureInput and useFixtureSelect (and Cosmos in general) work great with TypeScript.