Documentation

Welcome to the toshi-nest wiki!

SelectControl

The <SelectControl/> component allows users SINGLE SELECT from a list of options.

import React, { useState } from "react";
import { SelectControl } from "@gns-science/toshi-nest";

const SelectControlExample = () => {
  const options = ["1", "2", "3"];

  const [selection, setSelection] = useState(options[0]);

  return (
    <SelectControl selection={selection} options={options} setSelection={setSelection} name={"select control demo}/>
  )
};

props

Prop	type
selection	string
options	string[]
setSelection	(selection: string) => void
name	string

---

ControlsBar

The <ControlsBar/> component takes a list of children, displays them with flex with wrapping, and adds margin: 10px to each children.

import React from "react";
import { ControlsBar } from "@gns-science/toshi-nest";

const ControlsBarDemo = () => {
  return (
   <ControlsBar>
     <Button1 />
     <Button2 />
   </ControlsBar>
  )
};

MultiSelect

The <MultiSelect/> component allows multiple selections from a list of options.

import { MultiSelect } from "@gns-science/toshi-nest";

const MultiSelectExample = () => {
  const options = ["1", "2", "3"];

  const [selection, setSelection] = useState(options[0]);

  return (
    <MultiSelect 
      selected={selection} 
      options={options} 
      setOptions={setSelection} 
      name={"MultiSelect"}
    />
  )
};

props

Prop	Type
options	string[];
selected	string[];
setOptions	(selections: string[]) => void
name	string