Wondering what’s next for npm?Check out our public roadmap! »

react-list-picker-test
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

react-list-picker

This project provides a List Picker Form field for Material-UI and React-Final-Form. The purpose is to have a compelling dymanic way for a user to select input in a form.

Demo

Installation

step 1:

npm i --save react-list-picker

step 2:

Installation (peer dependancies) - a must for it to work!

npm i --save final-form react-final-form final-form-arrays react-final-form-arrays @material-ui/core

Note: This is the version for Material-UI 1.0.0 or later.

Usage

This is a simple example showing how react-list-picker integrates with react-final-forms and with material-ui.

import React from "react";
import ListPickerField from "./ChipInput";
import { Form } from "react-final-form";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import arrayMutators from "final-form-arrays";
 
const myOptions = ["Meat Lover", "Veggie Heaven", "Hawaii-5-0", "Inferno"];
 
let output = [];
 
const onSubmit = values => {
  output = values.crazyList;
};
 
const theme = createMuiTheme({
  palette: {
    primary: { main: "#333" },
    secondary: { main: "#000" }
  },
  status: {
    danger: "orange"
  }
});
 
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Form
        onSubmit={onSubmit}
        mutators={{
          ...arrayMutators // super important to include!!!
        }}
        render={({ handleSubmit, ...rest }) => (
          <form onSubmit={handleSubmit} style={{ padding: "50px" }}>
            <ListPickerField
              name="crazyList"
              data={myOptions}
              isMulty
              title="My crazy list"
              buttonText="React List Picker"
            />
            <hr />
            <button type="submit">Submit</button>
 
            {output.map(val => (
              <h6>{val}</h6>
            ))}
          </form>
        )}
      />
    </MuiThemeProvider>
  );
}
 
export default App;

Properties

Name Required Type Default Description
name ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ yes string Field name for final form
data ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ yes string[] The input to select from
isMulty ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‎ no boolean false Allow selecting multiple values
title ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‎ no string "Select fields" Title shown on the ListPicker element
buttonText ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‎ no string "Select" Text value of the submit changes button

License

The files included in this repository are licensed under the MIT license.

Install

npm i react-list-picker-test

DownloadsWeekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

384 kB

Total Files

8

Last publish

Collaborators

  • avatar