# react-tinted > A react wrapper for the Tinted color harmony wheel Latest version **0.0.3** (published 2020-06-27) · MIT license · 0 weekly downloads ## Install ```sh npm install react-tinted pnpm add react-tinted yarn add react-tinted bun add react-tinted ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.3 | | Published | 2020-06-27 | | First published | 2020-06-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 39.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Zach Posten | | Maintainers | zposten | | Keywords | d3, color, color wheel, color-wheel, kuler, react, color harmony, color harmony wheel | ## Links - npm: https://www.npmjs.com/package/react-tinted - Repository: https://github.com/zposten/react-tinted - Homepage: https://github.com/zposten/react-tinted#readme - Issues: https://github.com/zposten/react-tinted/issues - npm.io page: https://npm.io/package/react-tinted ## Dependencies (4) - [tinted](https://npm.io/package/tinted.md) ^0.0.6 - [chroma-js](https://npm.io/package/chroma-js.md) ^2.1.0 - [classnames](https://npm.io/package/classnames.md) >=2.0.0 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.3 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.3 (latest) — 2020-06-27 - 0.0.2 — 2020-06-27 - 0.0.1 — 2020-06-26 ## README # react-tinted Tinted is a color harmony wheel. It helps you choose color combinations that create pleasing contrasts and feel harmonious. [Demo](https://zposten.github.io/tinted) ## Install ```bash # Install with yarn yarn add react-tinted # Or install with NPM npm i react-tinted ``` ## Usage ```jsx import {TintedWheel, TintedPalette, colorModes} from 'react-tinted' ``` ```jsx
``` ```scss @use 'tinted/wheel'; @use 'tinted/palette'; .my-color-wheel { display: flex; flex-direction: column; align-items: center; margin: auto; max-width: 400px; } ``` A few things to note: - The wheel can be used without the palette, but it is recommended to use them together. - To make these abbreviated `@use` statements work, you will need to add `node_modules` to SASS' `--load-path` or sass-loader's `includePaths`. Alternatively, you could just path into `node_modules` explicitly. - If you're not using SASS in your project, we do provide compiled CSS files in the `tinted/dist` folder. ## Custom Colors You can initialize Tinted with a custom color set: ```jsx ``` ## Components ### TintedWheel The color harmony wheel for the user to make a selection of colors. #### Props | Name | Type | Description | | -------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `React.Children` | Color wheel "plugins" like the `TintedPalette` | | `className` | `string` | A class name to add to the root element | | `colorCount` | `number` | The number of colors to use in the color harmony | | `initRoot` | color-like value | The color that should initially be used to select other harmony colors | | `customColors` | color-like array | Rather than specify a root color and a color count, you can pass an array of color-like objects and strings | | `mode` | `string` | The color harmony mode. Determines how `initRoot` is used to find other colors | | `colorWheelImage` | `string` | A URI to a color HSV color wheel image to use | | `onColorsChanged` | `(hexColorStrings, currentMode, wheel) => void` | Callback invoked when the user manipulates the color markers | | `radius` | `number` | The radius of the wheel in SVG coordinate units | | `markerWidth` | `number` | The diameter of the markers used to select colors on the wheel in SVG coordinate units | | `markerOutlineWidth` | `number` | The width of the outline of the color marker in SVG coordinate units | | `margin` | `number` | The distance between the border of the `` and the circle of the wheel in SVG coordinate units. It is not recommended to pass this prop | | `baseClassName` | `string` | The prefix for the class names for all generated elements. Overriding this will cause all provided CSS to no longer work. It is not recommended to pass this prop | Also spreads any other props passed on the root element. ### TintedPalette A palette of colors to display the user's chosen values from the `TintedWheel`. For each color it: - Allows the user to change the value (or brightness -- "V" in the HSV color model) of the color - Displays the hex string value of the color #### Props | Name | Description | | ----------- | ------------------------------------------------------------- | | `children` | An element to be duplicated beneath each color in the palette | | `className` | A class name to add to the root element | Also spreads any other props passed on the root element. ## Styling Feel free to override any of the default styling as you please. Out of the box, tinted supports a color scheme for a light and dark background, defaulting to the light background. To change it to expect a dark background, add a `tinted--dark` class to a parent element of the wheel and/or palette. --- _Source: https://npm.io/package/react-tinted · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._