Add initial README.md

README.md

@@ -0,0 +1,81 @@
+React-Tags-Input
+============
+
+An input control that handles tags interaction with copy-paste and custom type support.
+
+![demo](https://raw.githubusercontent.com/sentisis/react-tags-input/master/demo.gif)
+
+## Live Playground
+
+For examples of the tags input in action, check the [demo page](https://sentisis.github.io/react-tags-input/)
+
+
+## Installation
+
+The easiest way to use it is by installing it from NPM and include it in your own React build process.
+
+```javascript
+npm install @sentisis/react-tags-input --save
+```
+
+## Usage
+
+Example usage:
+```jsx
+import React from 'react';
+import TagsInput from '@sentisis/react-tags-input';
+// Either a copy of our demo CSS or your custom one
+import './TagsInput.css';
+
+export default class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tags: [],
+    };
+  }
+
+  render() {
+    return (
+      <TagsInput
+        label="Tags"
+        placeholder="Write tags"
+        tags={this.state.tags}
+        onChange={tags => this.setState({ tags })}
+      />
+    );
+  }
+}
+```
+
+## API
+Currently the component listen to the following keys: <kbd>enter</kbd>, <kbd>esc</kbd>, <kbd>backspace</kbd>, <kbd>mod</kbd>+<kbd>a</kbd>, <kbd>mod</kbd>+<kbd>c</kbd> and <kbd>mod</kbd>+<kbd>v</kbd> (for copy/paste).
+
+Each tag you will be passing should have the following shape:
+
+| Property | Type | Required | Description |
+| -------- | ---- | ----------- | -------- |
+| value | `String` | true | Tag value |
+| special | `Boolean` | false | Special marks the tag as different. For example a special tag when using the case-sensitive options is a case-sensitive tag |
+
+
+The TagsInput component contains the following properties:
+
+| Property | Type | Default | Description |
+| ---------| ---- | ------- | ----------- |
+| tags | `Array<Tags>` | [] | Array of tags to display |
+| label | `String` | undefined | Rendered above the field itself |
+| placeholder | `String` | undefined | Input placeholder |
+| error | `String` | undefined | Error message rendered below the field. When the field is set it will also have the class `is-error`|
+| tagRenderer | `Function` | undefined | Optional function that gets used to render the tag |
+| copyButton | `Boolean` | false | Renders a copy to clipboard button |
+| copyButtonLabel | `String` | `Copy to clipboard` | Label for the copy to clipboard button |
+| blacklistChars | `Array<String>` | [','] | Characters not allowed in the tags. Must always contain `,` |
+| specialTags | `Boolean` | false | Enable the creation of special tags |
+| specialButtonRenderer | Function | undefined | Function that gets used to render the special button |
+| specialButtonLabel | String | `Special` | Label for the special button. Only used when a `specialButtonRenderer` is not defined |
+| onChange | Function | noop | Fired when changing the tags with the `tags` array as the argument |
+| onBlur | Function | noop | Fired as the standard React SyntheticEvent |
+| onFocus | Function | noop | Fired as the standard React SyntheticEvent |
+| onSubmit | Function | noop | Fired when the user interaction is considered complete, invoked with `tags` |

src/TagsInput.jsx

@@ -31,30 +31,30 @@ export const tagShape = PropTypes.shape({
 });
 
 const propTypes = {
-  // Array of tags to display
-  tags: PropTypes.arrayOf(tagShape),
+  // Characters not allowed in the tags, defaults to `[',']` and must always
+  // contain `,`
+  blacklistChars: PropTypes.arrayOf(PropTypes.string),
 
-  // Rebdered above the field istself
-  label: PropTypes.string,
+  // Renders a copy to clipboard button
+  copyButton: PropTypes.bool,
 
-  placeholder: PropTypes.string,
+  // Label for the copy to clipboard button
+  copyButtonLabel: PropTypes.string,
 
-  // Error message rendered below the field. When set the field also has the
-  // class `is-error`
+  // Error message rendered below the field. When the field is set it will
+  // also has the class `is-error`
   error: PropTypes.string,
 
-  // Returns a custom way to render the tag
-  tagRenderer: PropTypes.func,
+  // Rendered above the field itself
+  label: PropTypes.string,
 
-  // Render a copy to clibaord button
-  copyButton: PropTypes.bool,
+  placeholder: PropTypes.string,
 
-  // Label for the copy button
-  copyButtonLabel: PropTypes.string,
+  // Array of tags to display
+  tags: PropTypes.arrayOf(tagShape),
 
-  // Characters not allowed in the tags, defaults to `[',']` and must always
-  // contain `,`
-  blacklistChars: PropTypes.arrayOf(PropTypes.string),
+  // Returns a custom way to render the tag
+  tagRenderer: PropTypes.func,
 
   // Enable the creation of special tags
   specialTags: PropTypes.bool,
@@ -66,10 +66,10 @@ const propTypes = {
   // Only used when a `specialButtonRenderer` is not defined.
   specialButtonLabel: PropTypes.string,
 
-  // Fired when changing the tags with as argument the `tags` array
+  // Fired when changing the tags with the `tags` array as the argument
   onChange: PropTypes.func.isRequired,
 
-  // Same as a standard DOM input
+  // Same as the standard React SyntheticEvent
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
 
@@ -82,12 +82,13 @@ const tagRenderer = ({ value, special }, onClick) => (
 );
 
 const defaultProps = {
-  tagRenderer,
   blacklistChars: [','],
+  copyButton: false,
   copyButtonLabel: 'Copy to clipboard',
   specialButtonLabel: 'Special',
   specialTags: false,
   tags: [],
+  tagRenderer,
   onBlur: () => {},
   onChange: () => {},
   onFocus: () => {},