A selector component built with ReactJS.
To install:
npm install react-awesome-selector
-Or with yarn-
yarn add react-awesome-selector
import React from 'react'
import Selector from 'react-awesome-selector'
import 'react-awesome-selector/dist/style.css'
const data = [
{ name: 'card', value: 89519 },
{ name: 'array', value: 49024 },
{ name: 'grocery', value: 90170 },
{ name: 'input', value: 56963 },
]
const withCategoryData = [
{ category: 'calculate', name: 'card', value: 89519 },
{ category: 'calculate', name: 'array', value: 49024 },
{ category: 'lavender', name: 'grocery', value: 90170 },
{ category: 'lavender', name: 'input', value: 56963 },
]
export default function Main() {
return (
<div>
<Selector
data={data}
selectTitle="Items"
selectedTitle="Cart"
onChange={(values) => console.log(values)}
/>
<Selector
data={withCategoryData}
categorize
selectTitle="Items"
selectedTitle="Cart"
onChange={(values) => console.log(values)}
/>
</div>
)
}
Selector.propTypes = {
/**
* Data input for the selector
*/
data: PropTypes.array,
/**
* Whether to display categories in the select list
*/
categorize: PropTypes.bool,
/**
* Title for the select list
*/
selectTitle: PropTypes.string,
/**
* Title for the selected list
*/
selectedTitle: PropTypes.string,
/**
* Function for getting the selected values when anything changes
*/
onChange: PropTypes.func,
}
Selector.defaultProps = {
data: [],
categorize: false,
selectTitle: '',
selectedTitle: '',
onChange: () => {},
}
Use the default styles by importing:
import 'react-awesome-selector/dist/style.css'
These classes are available for use:
// Main wrapper
.react-awesome-selector-wrapper {
}
// Category
.react-awesome-selector-category {
}
.react-awesome-selector-category-title {
}
.react-awesome-selector-category-children {
}
// Selected & Select list
.react-awesome-selector-selected-list {
}
.react-awesome-selector-select-list {
}
.react-awesome-selector-select-list {
}
.react-awesome-selector-selected-list-title {
}
.react-awesome-selector-select-list-title {
}
.react-awesome-selector-selected-list-items {
}
// Item
.react-awesome-selector-item {
}
.react-awesome-selector-item-icon {
}
Author: statebait
Demo: https://mohamedshadab.me/react-awesome-selector/
Source Code: https://github.com/statebait/react-awesome-selector
#react #reactjs #javascript