@gerrico/react-components v0.1.27

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

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

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

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

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

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

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

Each item of the array can have these props:

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;