Socket
Socket
Sign inDemoInstall

@ndustrial/nd-react-common

Package Overview
Dependencies
Maintainers
13
Versions
88
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ndustrial/nd-react-common

An NPM package of common react components


Version published
Weekly downloads
15
decreased by-11.76%
Maintainers
13
Weekly downloads
 
Created
Source

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


Table

Import
import { Table } from '@ndustrial/nd-react-common'
Usage
<Table
  className="table_className"
  data={[json object]}
  filterable
  headers={["strings"]}
  isLoading
  label="Table Data"
/>

Table can also be extended if you need custom rendering:

import { Table } from '@ndustrial/nd-react-common';
import PropTypes from 'prop-types';
import React from 'react';

class ExampleTable extends Table {
  static propTypes = {
    ...Table.propTypes,
    renderItem: PropTypes.func.isRequired
  };

  generateRows() {
    if (!(this.state.data && this.state.data.length)) {
      return (
        <tr key="no_data">
          <td colSpan={this.state.headers.length}>
            No {this.props.label || 'Data'} Available
          </td>
        </tr>
      );
    }

    return this.state.data.map((item) =>
      this.props.renderItem({ item, handleDragEnd: this.props.handleDragEnd })
    );
  }

  render() {
    return (
      <div className={`nd-table ${this.props.className}`}>
        {this.renderSearchBox()}
        {this.renderResults()}
        <div className="nd-table__container">
          <table className="dnd__source-table">
            <thead>
              <tr>{this.generateHeaders()}</tr>
            </thead>

            <tbody>
              {this.renderLoader()}
              {!this.props.isLoading && this.generateRows()}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default ExampleTable;
className (optional)

String to be appended to the table className

Default:''

data (optional)

Array of JSON objects to populate the table JSON object to populate the table

filterable (optional)

Boolean that allows the table to be filterable

Default: false

headers (optional)

Array of strings to set the headers in the table

isLoading (optional)

Boolean to determine if data is being fetched for the table.

If set to true, loading indicator and text displays in the table.

label (optional)

Used to provide a more specific message for loading and no data available text.

Example : label = "Test Items"

  • Loading message = Loading Test Items
  • No Data Found message = No Test Items Found

Default: Data

Keywords

FAQs

Package last updated on 17 Apr 2019

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