fix: pass relevant props to custom remove component and fix docs (#727)

* fix: pass relevant props to custom remove component and fix docs

* fix

* fix

README.md

@@ -151,7 +151,7 @@ Option | Type | Default | Description
 |[`handleInputFocus`](#handleInputFocus) | `Function` | `undefined` | Event handler for input onFocus
 |[`handleInputBlur`](#handleInputBlur) | `Function` | `undefined` | Event handler for input onBlur
 |[`minQueryLength`](#minQueryLength) | `Number` | `2` | How many characters are needed for suggestions to appear
-|[`removeComponent`](#removeComponent) | `Boolean` | `false` | Custom delete/remove tag element
+|[`removeComponent`](#removeComponent) | `Function` |  | Function to render custom remove component for the tags.
 |[`autocomplete`](#autocomplete) | `Boolean`/`Number` | `false` | Ensure the first matching suggestion is automatically converted to a tag when a [delimiter](#delimiters) key is pressed
 |[`readOnly`](#readOnly) | `Boolean` | `false` | Read-only mode without the input box and `removeComponent` and drag-n-drop features disabled
 |[`name`](#name) | `String` | `undefined` | The `name` attribute added to the input
@@ -353,16 +353,27 @@ class Foo extends React.Component {
 
 class RemoveComponent extends React.Component {
    render() {
+     const { className, onRemove } = this.props;
       return (
-         <button {...this.props}>
+         <button onClick={onRemove} className={className}>
             <img src="my-icon.png" />
          </button>
       )
    }
 }
 ```
+The below props will be passed to the `removeComponent`. You will need to forward the relevant props to your custom remove component to make it work.
+
+| Name | Type  | Description |
+| --- | ---  | --- |
+| `className` | `string`  | The prop `classNames.remove` passed to the `ReactTags` component gets forwarded to the remove component. Defaults to `ReactTags__remove` |
+| `onRemove` | `Function` | The callback to be  triggered when tag is removed, you will need to pass this to the `onClick` handler of the remove component |
+|`onKeyDown` | `Function` | The callback to be triggered when keydown event occurs. You will need to pass this to `onKeyDown` handler of the remove component|
+| `aria-label` | string | The `aria-label` to be announced when the tag at an index is deleted |
+| `tag` | <pre>{ id?: string, className: string, key: string }</pre> | The `tag` to be deleted.
+| `index` | number | the `index` of the tag to be deleted.
+
 
-The "ReactTags__remove" className and `onClick` handler properties can be automatically included on the `<button>` by using the [JSX spread attribute](https://facebook.github.io/react/docs/jsx-spread.html), as illustrated above.
 
 ### autocomplete
 Useful for enhancing data entry workflows for your users by ensuring the first matching suggestion is automatically converted to a tag when a [delimiter](#delimiters) key is pressed (such as the enter key). This option has three possible values:

__tests__/tag.test.js

@@ -60,16 +60,16 @@ describe('Tag', () => {
   });
 
   test('renders passed in removed component correctly', () => {
-    const CustomRemoveComponent = function() {
+    const CustomRemoveComponent = function () {
       return <a className="remove">delete me</a>;
     };
     const $el = mount(mockItem({ removeComponent: CustomRemoveComponent }));
     expect($el.find('a.remove').length).to.equal(1);
     expect($el.text()).to.have.string('delete me');
   });
 
-  test('renders conditionaly passed in removed component correctly', () => {
-    const CustomConditionRemoveComponent = function(props) {
+  test('renders conditional passed in removed component correctly', () => {
+    const CustomConditionRemoveComponent = function (props) {
       return props.tag.id === '1' ? null : <a className="removeTag">x</a>;
     };
     CustomConditionRemoveComponent.propTypes = {

src/components/RemoveComponent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {KEYS} from './constants';
+import { KEYS } from './constants';
 
 const crossStr = String.fromCharCode(215);
 const RemoveComponent = (props) => {
@@ -21,17 +21,27 @@ const RemoveComponent = (props) => {
     return <span />;
   }
 
+  const ariaLabel = `Tag at index ${index} with value ${tag.id} focussed. Press backspace to remove`;
   if (removeComponent) {
     const Component = removeComponent;
-    return <Component {...props} />;
+    return (
+      <Component
+        onRemove={onRemove}
+        onKeyDown={onKeydown}
+        className={className}
+        aria-label={ariaLabel}
+        tag={tag}
+        index={index}
+      />
+    );
   }
 
   return (
     <button
       onClick={onRemove}
       onKeyDown={onKeydown}
       className={className}
-      aria-label={`Tag at index ${index} with value ${tag.id} focussed. Press backspace to remove`}>
+      aria-label={ariaLabel}>
       {crossStr}
     </button>
   );