Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sm-react/react-material-color-picker

react-material-color-picker component for selecting colors from google material color palette :page_with_curl:
https://github.com/sm-react/react-material-color-picker

color material material-color-palette material-ui picker react storybook-addon tool

Last synced: 2 months ago
JSON representation

react-material-color-picker component for selecting colors from google material color palette :page_with_curl:

Host: GitHub
URL: https://github.com/sm-react/react-material-color-picker
Owner: sm-react
License: mit
Created: 2016-09-09T17:27:57.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2022-12-07T17:20:50.000Z (about 2 years ago)
Last Synced: 2024-11-11T11:30:13.221Z (3 months ago)
Topics: color, material, material-color-palette, material-ui, picker, react, storybook-addon, tool
Language: JavaScript
Homepage:
Size: 1.29 MB
Stars: 19
Watchers: 1
Forks: 5
Open Issues: 13
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        [![GitHub version](https://badge.fury.io/gh/sm-react%2Freact-material-color-picker.svg)](https://badge.fury.io/gh/sm-react%2Freact-material-color-picker)

[![npm version](https://badge.fury.io/js/react-material-color-picker.svg)](https://badge.fury.io/js/react-material-color-picker)

[![@airbnb](https://img.shields.io/badge/code%20style-Airbnb-brightgreen.svg)](https://github.com/sm-react/react-material-color-picker/blob/master/.eslintrc)

# React Material Color Picker Component

[Material Design](https://material.google.com/) is a design language introduced by Google. If you want to find color inspiration for a specific design style based on [material color palette](https://material.google.com/style/color.html#), you can use this component as a development tool. You may find it useful while creating Material apps in combination with such libraries as [Material-UI](http://www.material-ui.com/)

## Appearance

![screen1](https://github.com/sm-react/react-material-color-picker/raw/master/doc/screen1.png)

![screen2](https://github.com/sm-react/react-material-color-picker/raw/master/doc/screen2.png)

![screen3](https://github.com/sm-react/react-material-color-picker/raw/master/doc/screen3.png)

## Install

$ npm i react-material-color-picker --save

## Usage

```js

import React from 'react';

import MaterialColorPicker from 'react-material-color-picker';

// in your app

```

## Demo

[![Live demo](https://img.shields.io/badge/Live%20Demo-%20Storybook-brightgreen.svg)](https://sm-react.github.io/react-material-color-picker/?selectedKind=Material%20Color%20Picker&selectedStory=default%20view&full=0&down=1&left=1&panelRight=1&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)

## API

#### Props and Callbacks

**initColor** should be color string from Goggle material color palette

**style** - inline style of the root div node

**submitLabel** and **resetLabel** are titles of the appropriate buttons

**onSubmit** and **onReset** are callbacks wich will be invoked by clicking the appropriate buttons. It will recieve an argument with the following structure:

```js

event = {

        type, // 'submit' || 'reset', 

        timeStamp, // nativeEvent.timeStamp,

        target: {

            value, // currient color string,

            nativeEvent, // nativeEvent,

            name: 'MaterialColorPicker',

            node, // ref to root div element,

            ...this.props,

        }

};

```

## smArtLight

[![@UsulPro](https://img.shields.io/badge/github-UsulPro-blue.svg)](https://github.com/UsulPro)

[![@sm-react](https://img.shields.io/badge/github-smARTLight-red.svg)](https://github.com/sm-react)