leva.core — org.mentat/leva.cljs 0.2.2

Reagent components and utilities exposing the hooks declared by the Leva components GUI.

These components make it easy to synchronize state through Clojure's atom interface instead of React hooks and callbacks.

button cljs

(button on-click)

(button on-click opts)

Returns a schema entry that defines a button, given a function on-click and a map opt of options.

The opts allowed are any found in the types

• ButtonSettings
• GenericSchemaItemOptions

In public.ts in Leva's repository.

button-group cljs

(button-group opts)

(button-group label opts)

Returns a schema entry that defines a button group, given either

• a label and a map of {<string> (fn [get] ,,,)}
• only the map

Where get is of type string => value, and allows you to query the internal leva store.

Feel free to ignore get and query the stateful atom associated with this Controls instance from the value function.

Config cljs

(Config opts & children)

Component that configures a Leva panel with the supplied map of opts without explicitly rendering any inputs into it. If :store is not provided, configures the globally available Leva panel.

See the type LevaRootProps for a full list of available entries for opts and documentation for each.

You can pass any number of children components if you like for organizational purposes.

If you pass :store, any Controls component in children will use that store vs the store of the global panel.

NOTE: We recommend using SubPanel to declare non-global Leva panels, rather than worrying about creating and passing your own Leva store via :store. But for advanced use cases, please feel free!

Controls cljs

(Controls opts)

Component that renders inputs into a global or local Leva control panel, possibly synchronizing the panel's state into a provided atom.

Placing this component anywhere in the render tree will add controls to the global Leva panel.

To modify a local Leva panel, nest this component inside of a SubPanel.

Supported opts are:

• :schema: A leva schema definition. Any value not present in the supplied :atom should provide an :onChange handler.

• :atom: atom of key => initial value for schema entries. Any entry found in both :atom and in :schema will remain synchronized between the panel and the supplied :atom.

• :folder: optional map with optional keys :name and :settings:

  • :name: if provided, these controls will be nested inside of a folder with this name.

  • :settings: optional map customizing the folder's settings. See folder for a description of the supported options.

• :store: this is an advanced option that you probably won't need. If you do need this, pass a store created via leva's useCreateStore.

folder cljs

(folder schema)

(folder schema settings)

Given a sub-schema schema and an optional map of folder settings, returns a schema entry that wraps schema in a subfolder.

The supported (optional) settings are

• :collapsed if true, the folder will be collapsed on initial render. Defaults to false.

• :render (fn [get] <boolean>), providing dynamic control or whether or not the folder appears.

  get is of type string => value, and allows you to query the internal leva store. If the :render fn returns true, this folder will be rendered in the panel; if false it won't render.

• :color color string, sets the color of the folder title.

• :order number, sets the order of this folder relative to other components at the same level.

monitor cljs

(monitor object-or-fn)

(monitor object-or-fn settings)

Returns a schema entry that defines a "monitor", given as a first argument either

• a no-arg function that returns a number, or
• a react MutableRefObject returned by useRef, where (.-current ref) returns a number

and an optional settings map as a second argument. The supported (optional) settings are

• :graph: if true, the returned monitor shows a graph. if false, the monitor displays a number.

• :interval: the number of milliseconds to wait between queries of object-or-fn.

SubPanel cljs

(SubPanel opts & children)

Component that configures a non-global, standalone Leva panel with the supplied map of opts.

Any instance of Controls passed as children will render into this subpanel and not touch the global store.

See the type LevaRootProps for a full list of available entries for opts and documentation for each.