# react-color-grid

> - Show your lovely colors and copy them to the clipboard

Latest version **0.2.2** (published 2019-03-26) · 0 weekly downloads

## Install

```sh
npm install react-color-grid
pnpm add react-color-grid
yarn add react-color-grid
bun add react-color-grid
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2019-03-26 |
| First published | 2019-03-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 3.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | mrjavascripter |

## Links

- npm: https://www.npmjs.com/package/react-color-grid
- Repository: https://github.com/cthogg/react-color-grid
- npm.io page: https://npm.io/package/react-color-grid

## Dependencies (4)

- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.2.3
- [react-tooltip](https://npm.io/package/react-tooltip.md) ^3.10.0
- [react-toastify](https://npm.io/package/react-toastify.md) ^5.0.0-rc.3
- [react-copy-to-clipboard](https://npm.io/package/react-copy-to-clipboard.md) ^5.0.1

## Recent versions

- 0.2.2 (latest) — 2019-03-26
- 0.2.1 — 2019-03-26
- 0.2.0 — 2019-03-26
- 0.1.0 — 2019-03-26

## README

# React Color Grid
- Show your lovely colors and copy them to the clipboard

![readme-image]

## Simple Example

```javascript
import React, { Component } from "react";
import { ColorGrid } from "react-color-grid";

class App extends Component {
  render() {
    const colors = {
      items: [
        {
          colorCode: "#1866e2",
          textColor: "white"
        },
        {
          colorCode: "#e23d17",
          textColor: "white"
        }
      ]
    }
    return (
      <div>
        <ColorGrid
          colors={colors}
        />
      </div>
    );
  }
}

export default App;

```


## PropTypes

| Props                   | Type                   | Default   | Description                                                                                         |
|-------------------------|------------------------|-----------|-----------------------------------------------------------------------------------------------------|
| colors                | object                 | none | object containing the property items which itself is an array of colors                   |
| colors.items                | array of objects                 | none | object containing  colorCode and textColor properties                   |




## Roadmap
- replace the tooltip library and toastify with css to increase performance.
- add tests
- improve documentation

## Inspiration
http://ux.mailchimp.com/patterns/color
https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b

[readme-image]: ./img/react-color-grid.gif

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