Skip to content

Commit

Permalink
Merge pull request #4 from casesandberg/gh-pages
Browse files Browse the repository at this point in the history
1.0 ✨
  • Loading branch information
casesandberg committed Aug 17, 2015
2 parents b140f90 + d347c04 commit eb11a4f
Show file tree
Hide file tree
Showing 101 changed files with 50,356 additions and 93 deletions.
27 changes: 27 additions & 0 deletions .gitignore
@@ -0,0 +1,27 @@
# Logs
logs
*.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
5 changes: 5 additions & 0 deletions .jscsrc
@@ -0,0 +1,5 @@
{
"preset": "airbnb",
"disallowQuotedKeysInObjects": null,
"validateQuoteMarks": null
}
63 changes: 63 additions & 0 deletions README.md
@@ -0,0 +1,63 @@
# [React Color](http://casesandberg.github.io/react-color/)

* **7 Different Pickers** - Sketch, Photoshop, Chrome and many more

* **Popup or Block** - It can be used it as a popup or always visible

* **Make Your Own** - Use the building block components to make your own

![Sketch and Photoshop Color Picker Built in React](http://casesandberg.github.io/react-color/screenshot.png)

## Installation & Usage

```
npm install react-color --save
```

### Include the Component

```
var React = require('react');
var ColorPicker = require('react-color');
class Component extends React.Component {
render() {
return <ColorPicker type="sketch" />;
}
}
```

### Display It
Display the color picker popup on click, or don't define display and it will always be visible.

```
var React = require('react');
var ColorPicker = require('react-color');
class Component extends React.Component {
constructor() {
super();
this.state = {
displayColorPicker: false,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ displayColorPicker: !this.state.displayColorPicker });
}
render() {
return (
<div>
<button onClick={ this.handleClick }>Pick Color</button>
<ColorPicker display={ this.state.displayColorPicker } type="sketch" />
</div>
);
}
}
```

> 100% inline styles via [ReactCSS](http://reactcss.com/)

0 comments on commit eb11a4f

Please sign in to comment.