Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-material-ui-super-select

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-material-ui-super-select

Upgraded select drop down using the Material UI theme

  • 1.1.18
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

React Material UI Super Select

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.

Installation and use

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"
      />
    );
  }
}
Demo

To run the demo project :

  • Navigate to root directory of project
  • Enter npm install
  • Once finished installing, enter npm start
  • When the server starts, navigate to http://localhost:8080

Navigate to example/src to modify the demo app

Props
NameData TypeDefaultDescription
optionsArray<{ 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}>nullFor 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.
containerClassNameStringConcatenated className to the component's outer <div>
handleInputChangeFunctionCalled with the user's input when the input is changed
handleChangeFunctionFunction called when an option is selected. In the Select component, the
handleClearValueFunctionFunction called when the clear button is clicked
MenuItemNodeOptional 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
stayOpenAfterSelectionBooleanfalseIf set to true, the menu will stay open after a selection has been made
placeholderStringThe input field's placeholder
labelStringThe input field's label
loadingBooleanfalseIf true, a progress spinner will appear in place of the clear button, and functionality will be disabled.
disabledBooleanfalseIf true, all functionality will be disabled, and select field will be read-only
manualBooleanfalseUnder 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.
hideLabelBooleanfalseIf set to true, the label will be hidden
handleCreateFunctionOnly applicalble for the Creatable component; called after a user hits 'Enter' to create a new option

Keywords

FAQs

Package last updated on 17 Oct 2018

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc