{"action":"created","issue":{"url":"https://api.github.com/repos/prakhar1989/react-tags/issues/38","labels_url":"https://api.github.com/repos/prakhar1989/react-tags/issues/38/labels{/name}","comments_url":"https://api.github.com/repos/prakhar1989/react-tags/issues/38/comments","events_url":"https://api.github.com/repos/prakhar1989/react-tags/issues/38/events","html_url":"https://github.com/prakhar1989/react-tags/pull/38","id":128083237,"number":38,"title":"Allow custom remove/delete component to be specified","user":{"login":"rnicholus","id":593312,"avatar_url":"https://avatars.githubusercontent.com/u/593312?v=3","gravatar_id":"","url":"https://api.github.com/users/rnicholus","html_url":"https://github.com/rnicholus","followers_url":"https://api.github.com/users/rnicholus/followers","following_url":"https://api.github.com/users/rnicholus/following{/other_user}","gists_url":"https://api.github.com/users/rnicholus/gists{/gist_id}","starred_url":"https://api.github.com/users/rnicholus/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rnicholus/subscriptions","organizations_url":"https://api.github.com/users/rnicholus/orgs","repos_url":"https://api.github.com/users/rnicholus/repos","events_url":"https://api.github.com/users/rnicholus/events{/privacy}","received_events_url":"https://api.github.com/users/rnicholus/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2016-01-22T04:51:48Z","updated_at":"2016-01-22T05:18:17Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/prakhar1989/react-tags/pulls/38","html_url":"https://github.com/prakhar1989/react-tags/pull/38","diff_url":"https://github.com/prakhar1989/react-tags/pull/38.diff","patch_url":"https://github.com/prakhar1989/react-tags/pull/38.patch"},"body":"We needed to use an icon for the remove button instead of the supplied \"x\". Also, since an anchor element with no href is (usually) invalid, and an anchor is not really appropriate for actions that do not update the URL, we wanted to use a `<button>` element for the delete/remove element instead. The best way to accomplish this is to ensure the library allows the entire remove/delete element to be replaced. \r\n\r\nSo, I added an optional property to `<ReactTags />` - `removeComponent`. It expects a React component (which is a `function`), and passes it to the `<Tag />` component. This property is optional. If omitted, the existing anchor with \"x\" text node is used. Otherwise, the passed component is rendered in its place. Also, all attributes/properties that would normally be added to the anchor element are passed on through to the custom remove component if it is supplied.\r\n\r\nIf you want the remove/delete element to render as it always has, no code has to change for the user/integrator. But if you want to supply your own, your code would look something like this:\r\n\r\n```javascript\r\nimport {WithContext as ReactTags} from 'react-tag-input'\r\n\r\nclass Foo extends React.Component {\r\n   render() {\r\n      return <ReactTags removeComponent={RemoveComponent}/>\r\n   }\r\n}\r\n\r\nclass RemoveComponent extends React.Component {\r\n   render() {\r\n      return (\r\n         <button {...this.props}>\r\n            <img src=\"my-icon.png\" />\r\n         </button>\r\n      )\r\n   }\r\n}\r\n```\r\n\r\nThe \"ReactTags__remove\" and `onClick` handler properties will be included on the `<button>` by using the [JSX spread attribute](https://facebook.github.io/react/docs/jsx-spread.html)."},"comment":{"url":"https://api.github.com/repos/prakhar1989/react-tags/issues/comments/173813533","html_url":"https://github.com/prakhar1989/react-tags/pull/38#issuecomment-173813533","issue_url":"https://api.github.com/repos/prakhar1989/react-tags/issues/38","id":173813533,"user":{"login":"prakhar1989","id":649249,"avatar_url":"https://avatars.githubusercontent.com/u/649249?v=3","gravatar_id":"","url":"https://api.github.com/users/prakhar1989","html_url":"https://github.com/prakhar1989","followers_url":"https://api.github.com/users/prakhar1989/followers","following_url":"https://api.github.com/users/prakhar1989/following{/other_user}","gists_url":"https://api.github.com/users/prakhar1989/gists{/gist_id}","starred_url":"https://api.github.com/users/prakhar1989/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/prakhar1989/subscriptions","organizations_url":"https://api.github.com/users/prakhar1989/orgs","repos_url":"https://api.github.com/users/prakhar1989/repos","events_url":"https://api.github.com/users/prakhar1989/events{/privacy}","received_events_url":"https://api.github.com/users/prakhar1989/received_events","type":"User","site_admin":false},"created_at":"2016-01-22T05:18:17Z","updated_at":"2016-01-22T05:18:17Z","body":"Brilliant! Merging :beers: "}}