node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org ยป

@ndustrial/nd-react-common

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.

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"
    }

}

Datepicker

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

Leverages react-dates from AirBnB. Repo: https://github.com/airbnb/react-dates/


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