‚̧Nachos Preventing Motivation
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    This package has been deprecated

    Author message:

    This package has been deprecated. Please find this package under its new name @cloudflare/component-select.

    cf-component-select

    5.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    cf-component-select

    Cloudflare Select Component

    Installation

    Installation with yarn is recommended

     
    $ yarn add cf-component-select
     

    Usage

    import React from 'react';
    import { CodeBlock } from 'cf-component-code';
    import { Select } from 'cf-component-select';
     
    class SelectComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: 1,
          multiValue: [1, 3]
        };
      }
     
      handleChange(value) {
        this.setState({ value });
      }
     
      handleMultiChange(values) {
        this.setState({
          multiValue: values.map(selected => selected.value)
        });
      }
     
      render() {
        return (
          <div>
            <Select
              label="Basic"
              value={this.state.value}
              options={[
                { value: 1, label: 'One' },
                { value: 2, label: 'Two', disabled: true },
                { value: 3, label: 'Three' }
              ]}
              onChange={this.handleChange.bind(this)}
            />
     
            <Select
              searchable
              label="Searchable"
              value={this.state.value}
              options={[
                { value: 1, label: 'One' },
                { value: 2, label: 'Two' },
                { value: 3, label: 'Three' }
              ]}
              onChange={this.handleChange.bind(this)}
            />
     
            <Select
              searchable
              multi
              label="Searchable Multi"
              value={this.state.multiValue}
              options={[
                { value: 1, label: 'One' },
                { value: 2, label: 'Two' },
                { value: 3, label: 'Three' }
              ]}
              onChange={this.handleMultiChange.bind(this)}
            />
     
            <Select
              disabled
              label="Disabled"
              value={this.state.value}
              options={[
                { value: 1, label: 'One' },
                { value: 2, label: 'Two' },
                { value: 3, label: 'Three' }
              ]}
              onChange={this.handleChange.bind(this)}
            />
            <p>You can make Select searchable:</p>
     
            <CodeBlock>{`<Select searchable .../>`}</CodeBlock>
     
            <p>Or a multi-select:</p>
     
            <CodeBlock>{`<Select multi .../>`}</CodeBlock>
     
            <p>Or both!</p>
     
            <CodeBlock>{`<Select searchable multi .../>`}</CodeBlock>
     
            <p>Async and Creatable are also supported</p>
            <CodeBlock>
              {`<Select async .../>
    <Select creatable .../>`}
            </CodeBlock>
          </div>
        );
      }
    }
     
    export default SelectComponent;
     

    Keywords

    none

    Install

    npm i cf-component-select

    DownloadsWeekly Downloads

    193

    Version

    5.0.0

    License

    BSD-3-Clause

    Unpacked Size

    78.7 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar