Custom controls

A custom control example

Don't like the predefined control types? Want more control on controls? no problem.

You can import withControls, and wrap any arbitrary component with it.

withControls props

When you do that, you expose this component to the following props:

Name	Description
isPlaying boolean	tells your custom control if the simulation is playing.
params object	any and all of the simulation parameters.
pause function	call this function to pause the simulation (it stops playing, but is not reset.)
play function	call this function to start or resume playing the simulation.
stop function	call this function to stop the simulation (stops playing, time is reset to default, data of simulation is reset.)
updateTime fuction	call with a number to update the `tick` value in the simulation.

Custom controls use cases

do your own styling
position controls how you see fit relative to the Frame (not just below)
combine Frame and Control - the same component can render the simulation and change its parameters.

import {withControls, Model} from 'react-sim';
const MyControl = ({ params, setParams }) => (
  <input
    type="range"
    value={params['my-param']}
    onChange={e => setParams({ 'my-param': Number(e.target.value) })}
  />
);
const CustomControl = withControls(MyControl);
/* ... */
const CustomControlExample = () => (
  <Model showTimer={false} initialParams={{ 'my-param': 50 }}>
    <Flex flexDirection="column">
      <CustomControl />
      <MyFrame />
    </Flex>
  </Model>

The 1D automata is an example of custom controls.