@placardi/select

Select component is used for collecting user provided information from a list of options.

Installation

npm i @placardi/select

Dependencies

• react
• styled-components
• @placardi/theme
• @placardi/button

Usage

Basic usage

In order to use the select component, wrap the application in global theme provider from @placardi/theme. Then, use the select as any regular component.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select placeholder='Select option'>
      <Option value='option-1'>Option 1</Option>
      <Option value='option-2'>Option 2</Option>
      <Option value='option-3'>Option 3</Option>
    </Select>
  </ThemeProvider>
)

export default App;

Clearable select

Select can be made clearable so that users can clear selected option. Pass a clearable prop to the select in order to make it clearable. The default is set to false.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select placeholder='Select option' clearable>
      <Option value='option-1'>Option 1</Option>
      <Option value='option-2'>Option 2</Option>
      <Option value='option-3'>Option 3</Option>
    </Select>
  </ThemeProvider>
)

export default App;

Fluid select

Select component can be made fluid so that it occupies maximum width of its parent container. Pass a fluid prop to the select in order to make it fluid. The default is set to false.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select placeholder='Select option' fluid>
      <Option value='option-1'>Option 1</Option>
      <Option value='option-2'>Option 2</Option>
      <Option value='option-3'>Option 3</Option>
    </Select>
  </ThemeProvider>
)

export default App;

Customisable select options

Select options can either be text nodes or arbitrary elements.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select placeholder='Select option' clearable>
      <Option value='option-1'>
        <span>Option 1</span>
      </Option>
      <Option value='option-2'>
        <span>Option 2</span>
      </Option>
      <Option value='option-3'>
        <span>Option 3</span>
      </Option>
    </Select>
  </ThemeProvider>
)

export default App;

Select with initial value

Select component can be initialised with one of the values already selected by using defaultValue prop.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select defaultValue='option-1'>
      <Option value='option-1'>
        <span>Option 1</span>
      </Option>
      <Option value='option-2'>
        <span>Option 2</span>
      </Option>
      <Option value='option-3'>
        <span>Option 3</span>
      </Option>
    </Select>
  </ThemeProvider>
)

export default App;