react-search-panel
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    React Search Panel

    A react search panel that expands, autocompletes, and support single or multi select.

    Demo

    React Search Panel

    There is a demonstration of react-search-panel as coded in the example folder.

    Many other variants of this component are demonstrated in this Storybook demonstration.

    Documentation

    Here is documentation of the component API.

    Getting started

    For development

    1. npm install --save-dev react-search-panel

    Run example locally

    1. git clone https://github.com/jeremydavidson/react-search-panel
    2. cd example
    3. npm install
    4. npm start

    Usage

    Typescript example

    This is an example in Typescript with all available props:

    import React from "react";
    import { SearchPanel } from "react-search-panel";
    
    const App = () => {
      const [input, setInput] = React.useState("");
      const [selectedChoices, setSelectedChoices] = useState(choices);
      return (
        <SearchPanel
          chips
          choices={choices}
          float
          maximumHeight={250}
          onChange={event => setInput((event as React.ChangeEvent<HTMLInputElement>).target.value)}
          onClear={() => setInput("")}
          onFocus={event => handleFocus((event as React.FocusEvent<HTMLInputElement>).target.value)}
          onSelectionChange={setSelectedChoices}
          noChoiceItem={noChoiceItem}
          placeholder="Search"
          selectedChoices={selectedChoices}
          shadow
          small
          value={input}
          variant={SearchPanelVariant.checkbox}
          width={300}
        />
      );
    }
    export default App;

    Javascript

    This is an example in Javascript with only the required props.

    import React from "react";
    import { SearchPanel } from "react-search-panel";
    
    const App = () => {
      const [input, setInput] = React.useState("");
      const [selectedChoices, setSelectedChoices] = useState(choices);
      return (
        <SearchPanel
          choices={choices}
          onChange={event => setInput(event.target.value)}
          onSelectionChange={setSelectedChoices}
          placeholder="Search"
          selectedChoices={selectedChoices}
          value={input}
        />
      );
    }
    export default App;

    Install

    npm i react-search-panel

    DownloadsWeekly Downloads

    136

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    2.25 MB

    Total Files

    13

    Last publish

    Collaborators

    • jeremydavidson