# sandro-generic-tile10

> `react-generic-tile` is a **KPI tiles** built for React

Latest version **1.0.5** (published 2022-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install sandro-generic-tile10
pnpm add sandro-generic-tile10
yarn add sandro-generic-tile10
bun add sandro-generic-tile10
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-03-23 |
| First published | 2022-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rossasan |

## Links

- npm: https://www.npmjs.com/package/sandro-generic-tile10
- npm.io page: https://npm.io/package/sandro-generic-tile10

## Dependencies (4)

- [react-icons](https://npm.io/package/react-icons.md) ^3.1.0
- [react-spinners](https://npm.io/package/react-spinners.md) ^0.4.5
- [styled-components](https://npm.io/package/styled-components.md) ^3.4.10
- [react-lines-ellipsis](https://npm.io/package/react-lines-ellipsis.md) ^0.13.2

## Recent versions

- 1.0.5 (latest) — 2022-03-23

## README

# 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](https://codesandbox.io/s/23yj4zr9w0?expanddevtools=1)
![](https://i.imgur.com/BMsecOs.png)

## 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                             |

---
_Source: https://npm.io/package/sandro-generic-tile10 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._