UI Controls

Props controls 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.

The following fixture APIs enable creating custom UI controls in the Control Panel.

`useValue`

CounterButton.fixture.jsx

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

`useSelect`

Button.fixture.jsx

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

useValue and useSelect (and Cosmos in general) work great with TypeScript.

`<Viewport>`

By using the Viewport decorator a fixture can trigger the responsive preview in the Cosmos UI on a specific resolution.

import { Viewport } from 'react-cosmos/client';
 
export default (
  <Viewport width={375} height={667}>
    <MyComponent />
  </Viewport>
);

Decorators cosmos.config.json