NRD.js

A React Component Library with all the most used components for Front-End Development created by lnardon

You can use this React Component Library to optimize your front-end development or even give it a more complete feel to your functional mockups.

For now all the components have a minimalistic black/white style but in the future new designs will be created

Available Components:

• Alert
• ContactForm
• ExpandableArea
• InputField
• LoginForm
• Progress
• Rating
• Select
• Slider
• Switch

Available Hooks:

• useCPFChecker
• useLocalStorage
• useLogger

Install

npm install nrd.js

Usage

import React from 'react'

import { LoginForm } from 'nrd.js'

const App = () => {
  return <LoginForm />
}

License

Any Contribution is Welcome !!! MIT © lnardon

DOCUMENTATION

Components

Alert

| Prop | Description | value/format | | :------ | :-------------- | :----------- | | message | Alert's Message | string |

ContactForm

| Prop | Description | value/format | | :---- | :------------------------------------------------------------------------ | :----------- | | url | URL of the server to make the POST request with the username and password | string | | title | Title to be displayed above the form | string |

ExpandableArea

| Prop | Description | value/format | | :-------- | :------------------------------------------ | :----------- | | title | Title of the expandalble area | string | | content | Content hidden by the expandalble area | string | | getStatus | Callback to get the status expandalble area | function |

InputField

| Prop | Description | value/format | | :--------------- | :---------------------------------------------------------------- | :----------- | | type | Type of the input field (e.g: string, number, email, password) | string | | getvalueCallback | Callback that returns the value from the input field as parameter | function |

LoginForm

| Prop | Description | value/format | | :--------- | :------------------------------------------------------------------------ | :----------- | | LoginImage | URL of the image displayed above the form | string | | url | URL of the server to make the POST request with the username and password | string |

Progress

| Prop | Description | value/format | | :------------ | :-------------------------------------- | :----------- | | maxValue | Maximun value of the progress indicator | number | | progressValue | Initial value of the progress indicator | number |

Rating

| Prop | Description | value/format | | :--------------- | :--------------------------------------------------------------------- | :----------- | | getvalueCallback | Callback that returns the value from the Rating Component as parameter | function |

Select

| Prop | Description | value/format | | :--------------- | :---------------------------------------------------------------------------------------------------- | :------------ | | options | Array with the options available for the user to select(e.g: {label: OptionTitle, value: InputValue}) | array of JSON | | getvalueCallback | Callback that returns the selected value from the select as a parameter | function |

Slider

| Prop | Description | value/format | | :--------------- | :--------------------------------------------------------------------- | :----------- | | min | Minimal value of the slider | number | | max | Maximal value of the slider | number | | getvalueCallback | Callback that returns the value from the Select Component as parameter | function |

Switch

| Prop | Description | value/format | | :------- | :-------------------------------------------- | :----------- | | getState | Callback that returns the state of the switch | function |

Hooks

useCPFChecker

Function to check if the CPF Number (Brazilian Social Security) is valid.

useLocalStorage

Function to facilitate saving values in local storage.

useLogger

Function to log a given variable every time it change value.