1.0.5 • Published 6 years ago
react-generic-tile v1.0.5
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.."}
/>
</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 |