Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tariqulislam/react-color-picker
Color Picker with Textbox and React Color. Integrated the React Color with Textbox
https://github.com/tariqulislam/react-color-picker
color-picker javascript-library react react-color reactjs
Last synced: 6 days ago
JSON representation
Color Picker with Textbox and React Color. Integrated the React Color with Textbox
- Host: GitHub
- URL: https://github.com/tariqulislam/react-color-picker
- Owner: tariqulislam
- Created: 2018-11-21T17:43:47.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-09T07:31:54.000Z (about 6 years ago)
- Last Synced: 2024-11-07T09:49:55.706Z (about 2 months ago)
- Topics: color-picker, javascript-library, react, react-color, reactjs
- Language: JavaScript
- Homepage: https://codesandbox.io/s/github/tariqulislam/react-color-picker
- Size: 60.5 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-color-picker
Color picker is a important form element, which are used in website, which has color functionality, such as e-commerce site, garments related online software. Project management software and diagram related online application.
# NPM Package Link
```
https://www.npmjs.com/package/react-color-picker-text
```
# Installation and Configure
```
npm install --save react-color-picker-text
```
Import the library to jsx or js file of react application
```javascript
import ColorPicker from "react-color-picker-text";
```
# Sample Code
```javascript
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ColorPicker from "react-color-picker-text";
import "./styles.css";
class App extends Component {
onColorPickerInfoChange = color => {
console.log("Main Color Change", color);
};
render() {
// change the default design of the color picker
const styles = {
title: "Color Picker",
labelStyle: {
paddingBottom: "7px",
fontSize: "11px"
},
colorTextBoxStyle: {
height: "35px",
border: "none",
borderBottom: "1px solid lightgray",
paddingLeft: "35px"
}
};
return (
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
## Get Color from Picker
From Picker we can get RGBA color and Hex Color pattern. We also get Hue Pattern by calling this function
named `onColorChange` as `` props
```javascript
```
Then You just call the method to react class
```javascript
onColorPickerInfoChange = color => {
console.log("Main Color Change", color);
};
```
## Change the Style of Textbox of Color picker within `render` function
```javascript
const styles = {
......
colorTextBoxStyle: {
height: "35px",
border: "none",
borderBottom: "1px solid lightgray",
paddingLeft: "35px"
}
};
```
Then add it to `` props just like that
```javascript
```
## Change the Style of Label and Label name of Color picker by
```javascript
const styles = {
title: "Color Picker",
labelStyle: {
paddingBottom: "7px",
fontSize: "11px"
},
};
```
Then add it to `` props just like that
```javascript
```
## Picker Type (pickerType: )
```
1. Chrome,
2. Sketch,
3. Photoshop,
4. Github,
5. Twitter,
6. Swatches,
7. Compact
```
Change the Type just add the props to ``
```javascript
```
By Default This `` Initial Color is `Gray` or `#999999`
Developer Can change this color by using `defaultColor` props in ``
```javascript
```