Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

@ndustrial/nd-react-common

0.10.1 • Public • Published

wercker status

nd-react-common

An NPM package of common react components to be utilized within nSight 2.0

Installation

To install this in your project, run npm login then npm install @ndustrial/nd-react-common react react-dom react-router-dom underscore.

NOTE: react, react-dom, react-router-dom, and underscore are peer dependencies -- you may already have these installed.

After it is installed, it can be utilized in your react project as follows:

Header

Import
import { Header } from '@ndustrial/nd-react-common'

Dropdown

Import
import { Dropdown } from '@ndustrial/nd-react-common'
Usage
<Dropdown data={json object} filterable={false} label="Select Option"/>
data (required)

JSON object to populate the dropdown list

filterable (optional)

Should the user be able to type and filter the list.


User Dropdown

Import
import { UserDropdown } from '@ndustrial/nd-react-common'
Usage
<UserDropdown user={json object}/>
user (required)

JSON object to populate the user name and image

{
  "user":
    {
      "id": 1,
      "userName": "Bret Kruse",
      "profileImage": "https://readjack.files.wordpress.com/2010/11/e-train1.jpg"
    }

}

DatePickerInput

Leverages react-day-picker. Additional props available can be found in their documentation.

Import
import { DatePickerInput } from '@ndustrial/nd-react-common';
Usage
<DatePickerInput
  containerClassName="input__container"
  format={'D MMMM YYYY'}
  inputProps={{
    autocomplete: 'off',
    className: "input__input"
  }}
  onDayChange={(date) => onChange(date ? date.toISOString() : null)}
  value={props.value ? moment(props.value).format('D MMMM YYYY') : ''}
/>
containerClassName (optional)

Class name applied to the outer containing div.

inputProps (optional)

An object containing props that are applied to the Input field.

inputProps -- className (optional)

Class name applied to the input field that triggers the opening of the calendar overlay.

inputProps -- Other Props (optional)

Any other props that can be applied to an input element can also be passed as part of the inputProps object.

onDayChange (required)

Function called when selecting a date. Used to update the state of a parent component or a Redux store.

overlayClassName (optional)

Class name applied to the calendar overlay div.

overlayWrapperClassName (optional)

Class name applied to the calendar overlay wrapper div.

Other Props (optional)

Any other props listed in the react-day-picker DayPickerInput documentation can also be passed.


List

Import
import { List } from '@ndustrial/nd-react-common'
Usage
<List filterable={true} data={json object} name="organizations" callback={(value) => { this.callback(value); }}/>
data (required)

JSON object to populate the list

filterable (optional)

Should the user be able to type and filter the list.

name (optional)

Used to provide a placeholder and filtering labels i.e. "Filter organizations" or "No organizations found"

callback (optional)

Triggered when an item and selected. Returns selected object from json object


install

npm i @ndustrial/nd-react-common

Downloadsweekly downloads

117

version

0.10.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability