zloit / React-Select

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Select компонент

Многофункциональный React компонент выбора по аналогии из HTML.
Cтраница интерактивной тех. документации: React Select

Инициализация компонента

<Select 
	placeholder='Имя'
	list={['Ваня','Петя','Саша','Андрей']}
	/>

Возможности компонента

  • Передача в компонент массива строк для реализации выбора.
    list={['Ваня','Петя','Саша','Андрей']}>.
  • Передача массива объектов с указанием для каждого элемента списка его названия и иконку (опционально). В начале файла:
    import {items} from './countries.json'
    Затем при инициализации компонента передаем атрибут items={items}
  • Возможность передать url, по которому будет получен список элементов (объекты, как в предыдущем пункте в формате JSON).
    url={'http://***.**/*/file.json'}
  • Настройка стиля компонента. Для указания пользовательских стилей используйте атрибуты containerStyle, inputStyle, itemStyle, listStyle. Например:
    inputStyle={{ backgroundColor: '#1d1f20', border: '1px solid white', color: '#fff' }}
  • Параметр для возможности ввода текста с фильтрацией предлагаемых элементов, а не только выбор из списка.
    isFiltered
  • Параметр для возможности отображения списка компонента в отдельном модальном окне.
    modal
  • Настройка placeholder.
    placeholder={'Страна'}
  • Возможность множественного выбора.
    multiple

Available Scripts

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

About


Languages

Language:JavaScript 70.5%Language:CSS 19.6%Language:HTML 9.9%