nrd.js

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.