Generic Tile

react-generic-tile is a KPI tiles built for React

Installation

npm install react-generic-tile

or

yarn add react-generic-tile

Demo

CodeSandbox Demo: https://codesandbox.io/s/23yj4zr9w0?expanddevtools=1

Example

import React from "react";
import ReactDOM from "react-dom";

import GenericTile from "react-generic-tile";

function App() {
  return (
    <div className="App">
      <GenericTile
        header={"Jessica Daniell"}
        subheader={"Senior Consultant, Department Sales & Distribution"}
        loading={false}
        number={"65.5"}
        scale={"MM"}
        color={"Good"}
        indicator={"Up"}
        footer={"This is only example.."}
        background={"#386dc2"}
        width={"200px"}
        padding={"20px"}
        colorfoot={"#FFF"}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Avaible tile props

| Property | Type | Default | Description | | ------------ | :-------: | :---------: | ----------------------------------------- | | header | String | '' | Header text | | subheader | String | '' | Subheader text | | footer | String | '' | Footer text | | number | String | '' | Displayed number (could be text also) | | scale | String | '' | Scale text | | indicator | String | null | "Up" or "Down" | | icon | Object | '' | Icon object | | color | String | '' | Hex Color or : "Good", "Warning" or "Bad" | | loading | Boolean | false | Loading state |