Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-material-ui-super-select
Advanced tools
Upgraded select drop down using the Material UI theme
Select drop down field that uses the beautiful stylings of Material UI, but adds option for multi select and creatable select.
The functionality of this select box was inspired by react-select.
npm install -s react-material-ui-super-select
The package exports Select
, MultiSelect
, and Creatable
.
Example use :
import React from 'react';
import { Select } from 'react-material-ui-super-select';
class App extends React.Component {
state = {
value: null,
options: [
{ id: '1', label: 'One' },
{ id: '2', label: 'Two' },
{ id: '3', label: 'Three' },
],
};
render() {
return (
<Select
label='Select'
options={this.state.options}
handleChange={value => this.setState({ value })}
handleClearValue={() => this.setState({ value: null })}
selectedValue={this.state.value}
containerClassName="select-container"
/>
);
}
}
To run the demo project :
npm install
npm start
http://localhost:8080
Navigate to example/src
to modify the demo app
Name | Data Type | Default | Description |
---|---|---|---|
options | Array<{ id: String, label: string }> | required - Used to render the options list. Only label will be displayed. id MUST be unique among the other elements in the list | |
selectedValue | { id: String, label: String } or Array<{ id: String, label: String}> | null | For the Select component, this must be an object that matches one of the objects in the options prop. For the MultiSelect and Creatable components, this must be an array of objects that each match objects in the options prop. |
containerClassName | String | Concatenated className to the component's outer <div> | |
handleInputChange | Function | Called with the user's input when the input is changed | |
handleChange | Function | Function called when an option is selected. In the Select component, the | |
handleClearValue | Function | Function called when the clear button is clicked | |
MenuItem | Node | Optional component to render in place of the default menu item. Will receive a prop named option , which will be the option that is being rendered | |
stayOpenAfterSelection | Boolean | false | If set to true, the menu will stay open after a selection has been made |
placeholder | String | The input field's placeholder | |
label | String | The input field's label | |
loading | Boolean | false | If true, a progress spinner will appear in place of the clear button, and functionality will be disabled. |
disabled | Boolean | false | If true, all functionality will be disabled, and select field will be read-only |
manual | Boolean | false | Under the hood, this package filters the visible options based on user input. If manual is true, the component won't do any filtering, and all management of options filtering will need to be done manually. |
hideLabel | Boolean | false | If set to true, the label will be hidden |
handleCreate | Function | Only applicalble for the Creatable component; called after a user hits 'Enter' to create a new option |
FAQs
Upgraded select drop down using the Material UI theme
The npm package react-material-ui-super-select receives a total of 2 weekly downloads. As such, react-material-ui-super-select popularity was classified as not popular.
We found that react-material-ui-super-select demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.