React Components

This library provides a list of useful components for React projects

Install

To install the library, run this command:

npm install @gerrico/react-components

Index

• React Components
  • Install
  • Index
  • BubbleLoader
    • Props
    • Example
  • BounceLoader
    • Props
    • Example
  • RadarLoader
    • Props
    • Example
  • Selector
    • Props
    • Example
  • Checkbox
    • Props
    • Example
  • Button
    • Props
    • Example
  • Dropdown
    • Props
    • Example

BubbleLoader

A loader with twelve bubbles that increase and decrease their size.

Props

Name	Description	Type	Required	Default
left?	Set the distance from the left margin	string	No
top?	Set the distance from the top margin	string	No
bubbleSize?	Set the size of the bubbles (the size of the component doesn't change)	number	No	1
color?	The color of the bubbles	string	No	#DDD
className?	Provide other style	string	No	undefined

Example

import React from "react";
import { BubbleLoader } from "./components";

const App = () => {
  return (
    <div>
      <BubbleLoader left="50vw" top="50vh" color="#20E080" />
    </div>
  );
};

export default App;

BounceLoader

A loader with three bouncing balls.

Props

Name	Description	Type	Required	Default
left?	Set the distance from the left margin	string	No
top?	Set the distance from the top margin	string	No
size?	A multiplying factor for balls size	number	No	1
color?	The color of the balls	string	No	#DDD
className?	Provide other style	string	No	undefined

Example

import React from "react";
import { BounceLoader } from "./components";

const App = () => {
  return (
    <div>
      <BounceLoader left="50vw" top="50vh" color="#2080E0" size={0.8}/>
    </div>
  );
};

export default App;

RadarLoader

A loader that simulates a radar signal

Props

Name	Description	Type	Required	Default
left?	Set the distance from the left margin	string	No
top?	Set the distance from the top margin	string	No
size?	A multiplying factor for radar size	number	No	1
color?	The color of the radar	string	No	#be97e8
fill?	Only border (if false) or entire circle (if true)	boolean	No	false
className?	Provide other style	string	No	undefined

Example

import React from "react";
import { RadarLoader } from "./components";

const App = () => {
  return (
    <div>
      <RadarLoader left="50vw" top="62vh" size={1} fill={false} />
    </div>
  );
};

export default App;

Selector

A button to toggle between states.

Props

Name	Description	Type	Required	Default
id	Unique id for the component	string	Yes
status	The status of the selector (false -> left, true -> right)	boolean	Yes
onClick	Action to perform	function	Yes
colorOff?	The color of the selector while is off	string	No	#444
colorOff?	The color of the selector while is on	string	No	#444
textColor?	The color of the text inside the selector	string	No	#FFF
disabled?	If true, the selector is disabled	boolean	No	false
className?	Provide other style	string	No	undefined

Example

import React, { useState } from "react";
import { Selector } from "@gerrico/react-components";

const App = () => {
  const [status, setStatus] = useState(false);

  return (
    <div>
      <Selector
        id="selector"
        status={status}
        onClick={() => {
          setStatus(!status);
        }}
        items={["OFF", "ON"]}
        colorOff="#2080B0"
        colorOn="#20B080"
      />
    </div>
  );
}

export default App;

Checkbox

A simple and custom checkbox

Props

Name	Description	Type	Required	Default
onClick	Action performed after clicking it	function	Yes
text?	Custom text for the checkbox	string	No
disabled?	If true, the component is disabled	boolean	No	false
className?	Provide other style	string	No	undefined

Example

import React, { useState } from "react";
import { Checkbox } from "@gerrico/react-components";

const App = () => {
  const [status, setStatus] = useState(false);

  return (
    <div>
      <Checkbox
        status={status}
        onClick={() => {
          setStatus(!status);
        }}
        text="Checkbox"
      />
    </div>
  );
}

export default App;

Button

A simple button with background color selection and automatic text color.

Props

Name	Description	Type	Required	Default
onClick	Action performed after clicking it	function	Yes
color	Background color for the button (text color is always black or white, based on the background color	string	No	#2090F0
disabled?	If true, the button is disabled	boolean	No	false
className?	Provide other style	string	No	undefined

ATTENTION: currently, the color prop must be in hex format (#RRGGBB). This is due to the calculation of the text color. In future, there will be the possibility to set the color by:

• picking it from a list of standard colors (primary, info, warning, danger, etc.)
• writing the exact color (red, blue, green, etc.)
• by entering the color coding (rgb, hsl, etc.)

Example

import React from "react";
import { Button } from "./components";

const App = () => {
  return (
    <div>
      <Button onClick={() => alert("Pressed!")}>Press Me!</Button>
    </div>
  );
};

export default App;

Dropdown

A dropdown control for items selection.

Props

Name	Description	Type	Required	Default
items	Array of items to show (props for items are described below)	array	Yes
title?	The string to show inside the control. If not set, the selected values is shown	string	No	First item
selected?	The index of the selected item	number	No	0
onSelect?	Action to perform after selecting an item. It returns the text and the index of the selected item	function	No
disabled?	If true, the dropdown is disabled	boolean	No	false
className?	Provide other style	string	No	undefined

Each item of the array can have these props:

Name	Description	Type	Required	Default
text?	The text of the item	string	No
checkbox?	Set if the item is a normal string or a checkbox	boolean	No	false
status?	The status of the checkbox (if checkbox is true)	boolean	No	false
onSelect?	Action to perform after selecting a checkbox item	function	No
disabled?	If true, the item is disabled	boolean	No	false
header?	If true, the item has a different style and it cannot be selected	boolean	No	false
divider?	A line that divides the previous and the following item. Other props are ignored	boolean	No	false

Example

import React from "react";
import { Dropdown } from "./components";

const App = () => {
  const [dropdownSelected, setDropdownSelected] = useState(0);

  const onChangeDropdownValue = (value, index) => {
    // `values` is the text of the item
    // `index` is the index of the item
    setDropdownSelected(index);
  };

  return (
    <div>
      <Dropdown
          items={[
            {
              text: "London",
            },
            {
              text: "Berlin",
            },
            {
              text: "Paris",
            },
            {
              text: "New York",
            },
            {
              text: "Rome",
            }
          ]}
          onSelect={onChangeDropdownValue}
          selected={dropdownSelected}
        />
    </div>
  );
};

export default App;