Rdl-ui-library NPM

rdl-ui-library

RDL ui library

Install

npm install --save rdl-ui-library
yarn add rdl-ui-library

Usage

Note

Some components in this Library are created with Bootstrap and FontAwesome. Add the following to the head of your page

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossOrigin="anonymous" />
<!--Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossOrigin="anonymous" />

Add the following to the end of your page's html (right before the last closing tag)

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossOrigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossOrigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossOrigin="anonymous"></script>

InputCard

import React, { Component } from 'react'

import {InputCard} from 'rdl-ui-library'

///*For next js include the css in _app.js*///
import 'rdl-ui-library/dist/index.css'

class Example extends Component {
  render() {
    return (
      <InputCard 
          inputLabel={"Branch Name*"}
          inputType={"text"}
          inputName={"b_name"}
          inputPlaceholder={"not set"}
          tooltipText={"Enter branch name"}
          defaultStyle={{color: '#AEAEAE'}}
          defaultValue={b_name}
          onValueChange={_handleForm}
          onFocusOut = {_handleForm}
      />
    )
  }
}

Props

inputName

Form input name (String)

inputLabel

Input lable name (String)

inputLableFontSize

Font size for the input label (String)

tooltipText

Tool tip text (String)

disabled

Input state (Boolean)

inputType

Form input type (String)

defaultValue

Default value for input (String)

onFocusOut

Handler for onFocusOut (Function)

onValueChange

Handler for value change (Function)

inputStyles

Styles to override default styles (Object)

Alert

Import the alert component from the library

import {Alert} from 'rdl-ui-library'

Props

alertText

The message you want to pass in the alert

alertHeader (Optional)

The header text for the alert. (NB: Adding a header text will disable the alert icon)

icon (Optional)

The icon to be used in the alert. (NB: Will not be rendered if there's an alertText)

button

To add a button to your alert, pass it as a child component

<Alert>
  <button class="btn btn-primary" type="button">Button</button>
</Alert>

NB Pass any button functionality through an onClick just as you would any other component

Result

Your alert button call should look something like this

<Alert alertText="The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph." closeButton icon="fas fa-check-circle" alertHeader="Primary Alert!" type="success"> <button class="btn btn-primary" type="button">Button</button> </Alert>

Dropdown

Props

direction

Determines the direction of the drop menu (Four possible values; up , down , right , left - Default: down )

icon (Optional)

Toggle icon display. Just pass the font awesome icon class (eg. fas fa-user )

text (Optional)

The dropdown button text

dropdown list

To render the dropdown list, pass them as children of the component. Add class dropdown-item to each of the list items

<Dropdown>
  <a className="dropdown-item" role="presentation" href="#">First Item</a>
  <a className="dropdown-item" role="presentation" href="#">Second Item</a>
  <a className="dropdown-item" role="presentation" href="#">Third Item</a>
 </Dropdown>

Result

Your dropdown call should look something like this

<Dropdown direction="down" text="Dropdown" icon="fas fa-check-circle" >
    <a className="dropdown-item" role="presentation" href="#">First Item</a>
    <a className="dropdown-item" role="presentation" href="#">Second Item</a>
    <a className="dropdown-item" role="presentation" href="#">Third Item</a>
</Dropdown>

ProgressBar

Props

value

This is the progress value of the component

label (Optional)

Add this prop to show the progress value in the component.

Result

Your component calll should look something like this

<ProgressBar percentage="50" label />

ProgressCircle

####Props

strokeWidth

Determines the thickness of the circle border

value

The progress (percentage) value. This should be a number. No need to add the percent symbol.

Result

Your component calll should look something like this

<ProgressCircle strokeWidth="10" percentage="71" />

LoadingSpin

A continuous loading spinner

Props

fillColor

The color of the spinner

Result

Your component calll should look something like this

 <LoadingSpin fillColor="#dce0ff" />

LoadingGrow

####Props

fillColor

The color of the component

Result

Your component calll should look something like this

<LoadingGrow fillColor="#959ABF" />

Alert

Import the alert component from the library

import {Alert} from 'rdl-ui-library'

Props

alertText

The message you want to pass in the alert

alertHeader (Optional)

The header text for the alert. (NB: Adding a header text will disable the alert icon)

icon (Optional)

The icon to be used in the alert. (NB: Will not be rendered if there's an alertText)

button

To add a button to your alert, pass it as a child component

<Alert>
  <button class="btn btn-primary" type="button">Button</button>
</Alert>

NB Pass any button functionality through an onClick just as you would any other component

Result

Your alert button call should look something like this

<Alert alertText="The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph." closeButton icon="fas fa-check-circle" alertHeader="Primary Alert!" type="success"> <button class="btn btn-primary" type="button">Button</button> </Alert>

Dropdown

Props

direction

Determines the direction of the drop menu (Four possible values; up , down , right , left - Default: down )

icon (Optional)

Toggle icon display. Just pass the font awesome icon class (eg. fas fa-user )

text (Optional)

The dropdown button text

dropdown list

To render the dropdown list, pass them as children of the component. Add class dropdown-item to each of the list items

<Dropdown>
  <a className="dropdown-item" role="presentation" href="#">First Item</a>
  <a className="dropdown-item" role="presentation" href="#">Second Item</a>
  <a className="dropdown-item" role="presentation" href="#">Third Item</a>
 </Dropdown>

Result

Your dropdown call should look something like this

<Dropdown direction="down" text="Dropdown" icon="fas fa-check-circle" >
    <a className="dropdown-item" role="presentation" href="#">First Item</a>
    <a className="dropdown-item" role="presentation" href="#">Second Item</a>
    <a className="dropdown-item" role="presentation" href="#">Third Item</a>
</Dropdown>

ProgressBar

Props

value

This is the progress value of the component

label (Optional)

Add this prop to show the progress value in the component.

Result

Your component calll should look something like this

<ProgressBar percentage="50" label />

ProgressCircle

####Props

strokeWidth

Determines the thickness of the circle border

value

The progress (percentage) value. This should be a number. No need to add the percent symbol.

Result

Your component calll should look something like this

<ProgressCircle strokeWidth="10" percentage="71" />

LoadingSpin

A continuous loading spinner

Props

fillColor

The color of the spinner

Result

Your component calll should look something like this

 <LoadingSpin fillColor="#dce0ff" />

LoadingGrow

####Props

fillColor

The color of the component

Result

Your component calll should look something like this

<LoadingGrow fillColor="#959ABF" />

License

react-phone-input-2

@infinitebrahmanuniverse/nolb-rd @everything-registry/sub-chunk-2537

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago