@garden/components

This package includes several varieties of notifications and wells within the Garden Design System.

Installation

npm install @garden/components

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming @zendeskgarden/react-dropdowns

Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { SelectSearchable } from '@garden/components'

const selectSearchableOptions = [
  "Asparagus",
  "Brussel sprouts",
  "Cauliflower",
  "Garlic",
  "Jerusalem artichoke",
  "Kale",
  "Lettuce",
  "Onion",
  "Mushroom",
  "Potato",
  "Radish",
  "Spinach",
  "Tomato",
  "Yam",
  "Zucchini",
]

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <SelectSearchable
          label="Choose a vegetable"
          options={selectSearchableOptions}
          onSelect={(item) => console.log(`${item} selected.`)}
        />
</ThemeProvider>;

SelectSearchable

| Prop name | Type | default | description | required | | --------- | ---------------------- | ------- | ------------------------------------------------- | -------- | | options | string[] | | An array containing just the names of all options | yes | | label | string | | A name that describes the dropdown menu | yes | | onSelect | (item: string) => void | | Select the item clicked | no |