1- # ` material-ui -color` picker and other components
1+ # ` mui -color` picker and other components
22
33[ ![ Build Status] [ action-image ]] [ action-url ]
44[ ![ codecov] [ codecov-image ]] [ codecov-url ]
1010[ ![ peer dependency status] [ peer-deps-svg ]] [ peer-deps-url ]
1111[ ![ Downloads] [ downloads-image ]] [ downloads-url ]
1212
13- [ action-image ] : https://github.com/mikbry/material-ui-color/workflows/Build%20and%20Deploy/badge.svg
14- [ action-url ] : https://mikbry.github.io/material-ui-color/
15- [ codecov-image ] : https://codecov.io/gh/mikbry/material-ui-color/branch/master/graph/badge.svg?token=K4P0vnM5fh
16- [ codecov-url ] : https://codecov.io/gh/mikbry/material-ui-color
17- [ npm-image ] : https://img.shields.io/npm/v/material-ui-color.svg
18- [ npm-url ] : https://npmjs.org/package/material-ui-color
19- [ license-image ] : https://img.shields.io/github/license/mikbry/material-ui-color
20- [ License-url ] :https://github.com/mikbry/material-ui-color/blob/master/LICENSE
21- [ min-image ] :https://badgen.net/bundlephobia/min/material-ui-color
22- [ min-url ] :https://bundlephobia.com/result?p=material-ui-color
23- [ deps-svg ] : https://david-dm.org/mikbry/material-ui-color.svg
24- [ deps-url ] : https://david-dm.org/mikbry/material-ui-color
25- [ dev-deps-svg ] : https://david-dm.org/mikbry/material-ui-color/dev-status.svg
26- [ dev-deps-url ] : https://david-dm.org/mikbry/material-ui-color#info=devDependencies
27- [ peer-deps-svg ] : https://david-dm.org/mikbry/material-ui-color/peer-status.svg
28- [ peer-deps-url ] : https://david-dm.org/mikbry/material-ui-color#info=peerDependencies
29- [ downloads-image ] : http://img.shields.io/npm/dm/material-ui-color.svg
30- [ downloads-url ] : http://npm-stat.com/charts.html?package=material-ui-color
13+ [ action-image ] : https://github.com/mikbry/mui-color/workflows/Build%20and%20Deploy/badge.svg
14+ [ action-url ] : https://mikbry.github.io/mui-color/
15+ [ codecov-image ] : https://codecov.io/gh/mikbry/mui-color/branch/master/graph/badge.svg?token=K4P0vnM5fh
16+ [ codecov-url ] : https://codecov.io/gh/mikbry/mui-color
17+ [ npm-image ] : https://img.shields.io/npm/v/mui-color.svg
18+ [ npm-url ] : https://npmjs.org/package/mui-color
19+ [ license-image ] : https://img.shields.io/github/license/mikbry/mui-color
20+ [ License-url ] :https://github.com/mikbry/mui-color/blob/master/LICENSE
21+ [ min-image ] :https://badgen.net/bundlephobia/min/mui-color
22+ [ min-url ] :https://bundlephobia.com/result?p=mui-color
23+ [ deps-svg ] : https://david-dm.org/mikbry/mui-color.svg
24+ [ deps-url ] : https://david-dm.org/mikbry/mui-color
25+ [ dev-deps-svg ] : https://david-dm.org/mikbry/mui-color/dev-status.svg
26+ [ dev-deps-url ] : https://david-dm.org/mikbry/mui-color#info=devDependencies
27+ [ peer-deps-svg ] : https://david-dm.org/mikbry/mui-color/peer-status.svg
28+ [ peer-deps-url ] : https://david-dm.org/mikbry/mui-color#info=peerDependencies
29+ [ downloads-image ] : http://img.shields.io/npm/dm/mui-color.svg
30+ [ downloads-url ] : http://npm-stat.com/charts.html?package=mui-color
31+
32+ # Preview port of Material-ui-color to Mui v5
3133
3234> Collections of color components for [ material-ui] ( https://github.com/mui-org/material-ui ) . No dependencies, small, highly customizable and theming support !
3335
36+
37+
3438![ Video of ColorPicker] ( ./images/muicc-v0-2.webp )
3539
3640## Contents
5660
5761Full documentation is available here :
5862
59- https://mikbry.github.io/material-ui -color/
63+ https://mikbry.github.io/mui -color/
6064
6165### Examples
6266
6367> You can find examples [ here] ( EXAMPLES.md ) and [ here] ( /examples ) .
6468
6569Also in codesanbox
6670
67- - Javascript : https://codesandbox.io/s/material-ui -color-qb4vm?file=/src/App.jsx
71+ - Javascript : https://codesandbox.io/s/mui -color-qb4vm?file=/src/App.jsx
6872
69- - Typescript : https://codesandbox.io/s/material-ui -color-picker-qvcg3?file=/src/App.tsx
73+ - Typescript : https://codesandbox.io/s/mui -color-picker-qvcg3?file=/src/App.tsx
7074
7175
7276## Requirements
@@ -76,12 +80,12 @@ Also in codesanbox
7680## Install
7781
7882``` bash
79- yarn add material-ui -color
83+ yarn add mui -color
8084```
8185
8286Or using npm
8387``` bash
84- npm install material-ui -color
88+ npm install mui -color
8589```
8690
8791## Usage
@@ -96,14 +100,14 @@ you need to have in your dependencies:
96100 "react-dom": "^17.0.1",
97101```
98102
99- ` material-ui -color` bring 5 components.
103+ ` mui -color` bring 5 components.
100104
101105### ` <ColorPicker/> `
102106
103107A popover component to display a color tool box. It uses ` ColorBox ` and ` material-ui-popup-state ` .
104108
105109``` javascript
106- import { ColorPicker } from ' material-ui -color' ;
110+ import { ColorPicker } from ' mui -color' ;
107111
108112export const Container = () => (
109113 < div>
@@ -114,13 +118,13 @@ export const Container = () => (
114118
115119At first it display a button + an input
116120
117- [ ColorPicker documentation] ( https://mikbry.github.io/material-ui -color/?path=/story/components-colorpicker--basic )
121+ [ ColorPicker documentation] ( https://mikbry.github.io/mui -color/?path=/story/components-colorpicker--basic )
118122
119123### ` <ColorBox /> `
120124
121125A component to display a color tool box
122126``` javascript
123- import { ColorBox } from ' material-ui -color' ;
127+ import { ColorBox } from ' mui -color' ;
124128
125129export const Container = () => (
126130 < div>
@@ -129,14 +133,14 @@ export const Container = () => (
129133);
130134```
131135
132- [ ColorBox documentation] ( https://mikbry.github.io/material-ui -color/?path=/story/components-colorbox--basic )
136+ [ ColorBox documentation] ( https://mikbry.github.io/mui -color/?path=/story/components-colorbox--basic )
133137
134138### ` <ColorInput /> `
135139
136140An input component to display/edit color values in different format (plain, hex, rgb, hsl, hsv).
137141
138142``` javascript
139- import { ColorInput } from ' material-ui -color' ;
143+ import { ColorInput } from ' mui -color' ;
140144
141145export const Container = () => (
142146 < div>
@@ -145,14 +149,14 @@ export const Container = () => (
145149);
146150```
147151
148- [ ColorInput documentation] ( https://mikbry.github.io/material-ui -color/?path=/story/components-colorinput--basic )
152+ [ ColorInput documentation] ( https://mikbry.github.io/mui -color/?path=/story/components-colorinput--basic )
149153
150154### ` <ColorPalette /> `
151155
152156A component to display a grid of color buckets.
153157
154158``` javascript
155- import { ColorPalette } from ' material-ui -color' ;
159+ import { ColorPalette } from ' mui -color' ;
156160
157161const palette = {
158162 red: ' #ff0000' ,
@@ -177,14 +181,14 @@ export const Container = () => (
177181);
178182```
179183
180- [ ColorPalette documentation] ( https://mikbry.github.io/material-ui -color/?path=/story/components-colorpalette--basic )
184+ [ ColorPalette documentation] ( https://mikbry.github.io/mui -color/?path=/story/components-colorpalette--basic )
181185
182186### ` <ColorButton /> `
183187
184188Displays a button filled with a color
185189
186190``` javascript
187- import { ColorButton } from ' material-ui -color' ;
191+ import { ColorButton } from ' mui -color' ;
188192
189193export const Container = () => (
190194 < div>
@@ -193,11 +197,11 @@ export const Container = () => (
193197);
194198```
195199
196- [ ColorButton documentation] ( https://mikbry.github.io/material-ui -color/?path=/story/components-colorbutton--basic )
200+ [ ColorButton documentation] ( https://mikbry.github.io/mui -color/?path=/story/components-colorbutton--basic )
197201
198202## Roadmap
199203
200- ### v1.0.0 - [ Current version] ( https://github.com/mikbry/material-ui -color/releases/tag/v1.0.0 )
204+ ### v1.0.0 - [ Current version] ( https://github.com/mikbry/mui -color/releases/tag/v1.0.0 )
201205- remove ` styled-components ` to have less dependencies and reduce size
202206- display wrong color using a red checked box
203207- bugs fixes
0 commit comments