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
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'] },
],
});
useFixtureInput
and useFixtureSelect
(and Cosmos in general) work great
with TypeScript.