A single-page reference of all the APIs used throughout React-Sim.

• Model
• withFrame
• grid
• canvasFrame
• timeSeries

Model

Usage

import {Model} from 'react-sim';
function initData = params => { /* ... */ }
function updateData =
  ({data, params, tick, ...args}) => { /* ... */ }
const params = { /* ... */};
function Frame =
  ({data, params, tick, ...args}) => <>{ /* ... */ }</>;
export function MyModel = () => <Model
  initalParams={params}
  initData={initData}
  updateData={updateData}
>
  <Frame />
</Model>

State

The difference between data and params is that data is being updated at each simulation tick, without user intervention, through the updateData function, whereas params is only modified when the user interacts with the controls.

The built-in parameters are:

Properties

The following properties can be used as is, or be passed inside initialParams,i.e.

<Model delay={100} />

or

<Model initialParams={{ delay: 100 }} />

initialParams takes precedence if both are used. They provide an initial value for the corresponding parts of the state.

Its arguments are of the form: ({cachedData, complete, data, params, pause, stop}). Its output will replace data in the state.

Style

Model uses the rebass component system. Rebass is part of a larger ecosystem that includes theme-ui and the styled system.

As such, Model can take a theme-ui theme and styled system sx props.

For more information on controls and the syntax of the control object, see Controls.

Frame Helpers

withFrame

Usage

import {Model, withFrame} from 'react-sim';
const FrameComponent = props => <>{ /* ... */ }</>;
const Frame = withFrame(FrameComponent);
export function MyModel = () => <Model>
  <Frame />
</Model>

API

withFrame is a wrapper around a Frame component.

Wrapping a component with withFrame will expose the connected component to the following properties: These properties come from the state of the Model this component is a descendant of.

For convenience, a component which is a direct child of a Model automatically receives these properties without withFrame.

import {Model, withFrame} from 'react-sim';
const FrameComponent = props => <>{ /* ... */ }</>;
const Frame = withFrame(FrameComponent);
export function MyModel = () => <Model>
  {/* this component has access to frame props */}
  <FrameComponent />
  <div>
    {/* this one doesn't, because it's not a direct child */}
    <FrameComponent />
    {/* this component has access to frame props, because it's connected */}
    <Frame />
  </div>
</Model>

Grid

see Grid guide

Usage

import {Model, Grid} from 'react-sim';
  export function MyModel = () => <Model>
    <Grid />
  </Model>

API

Any other prop will be passed to the Grid.

GridComponent

import { GridComponent } from 'react-sim';

Grid is wrapped with withFrame so it can be used anywhere in the tree. The corresponding, unwrapped component, GridComponent, can also be exported from react-sim.

CanvasFrame

see CanvasFrame guide

Usage

import {Model, CanvasFrame} from 'react-sim';
  function draw({ctx, data, ...args}) => {
    /* canvas operations */
  }
  export function MyModel = () => <Model>
    <CanvasFrame draw={draw} />
  </Model>

API

All the connected Frame context props, plus:

Circle

circle takes an object as argument with the following properties:

All the CanvasFrame properties, plus:

RoundRectangle

roundRectangle takes an object as argument with the following properties:

All the CanvasFrame properties, plus:

Draw

All the CanvasFrame properties, plus:

TimeSeries

see TimeSeries guide.

Series

series is an object with three properties:

TimeSeries

Counter

Indicator

Controls

See Controls guide.

withControls

Components wrapped with withControls gain access to the following properties:

Common Controls Properties

Unless otherwise specified, all built-in controls have the following properties:

setParams

By default, a control, when changed, will take its value and use it to update the param of the control, as is. Instead, a setParams function can be created that takes, as input, the value of the control, and which will output an object with one or more params as keys. With a setParams function, a control can update several params at once, or have a transformation between the value of the control and what is passed to the params.

Range

See the Range guide.

All Common control props properties, plus:

Timer

Default Timer

See the Default timer guide.

By default a Model comes with a built-in Timer control. For this defaut Timer, the following props come directly from Model (see Model properties.)

General case

See the Timer guide.

If the Timer is defined anywhere else, these properties can be passed to the Timer directly.

The Default timer properties, plus:

Unlike the other built-in controls, Timer does not take a value or a setValue parameter.

Checkbox

See the Checkbox guide.

Its API is solely the Common Control Props.

Input

See the Input guide.

Its API is solely the Common Control Props.

Radio

See the Radio guide.

The Common controls props properties, plus:

Select

See the Select guide.

The Common controls props properties, plus:

Toggle

See the Toggle guide.

Its API is solely the Common Control Props.