values

Description

Optional. Allows a user to bind values for controls inside the toolbar

Usage

values?: Record<string, any>;

Examples

Getting current value of controls inside of toolbar:

import { useState, useEffect } from "react";

export default function Example() {
  const [values, setValues] = useState({});

  // will be triggered on changes
  useEffect(() => {
    console.log(JSON.stringify(values));
  }, [values]);

  return (
    <Toolbar
      items={[
        { comp: Text, key: "query" },
        { comp: Switch, key: "state" },
      ]}
      values={values}
      onValuesChange={setValues}
    />
  );
}

Setting initial values for controls inside of toolbar:

import { useState } from "react";

export default function Example() {
  const initialValues = { query: "something else", state: true };
  const [values, setValues] = useState(initialValues);

  return (
    <Toolbar
      items={[
        { comp: Text, key: "query" },
        { comp: Switch, key: "state" },
      ]}
      values={values}
      onValuesChange={setValues}
    />
  );
}

Changing values for controls inside of toolbar:

import { useState } from "react";

export default function Example() {
  const items = [
    { type: "label", text: "Active Mode" },
    { comp: Switch, key: "state" },
  ];

  const [values, setValues] = useState({
    query: "something else",
    state: true,
  });

  // change value later on
  const reset = () => {
    setValues(prev => ({ ...prev, state: false }));
  };

  return (
    <>
      <Toolbar items={items} values={values} onValuesChange={setValues} />
      <button onClick={reset}>Reset</button>
    </>
  );
}