Reusable input component for adding tags, keywords, etc. Only dependency is React itself.
If you use Webpack to build your project, simply require index.js
and ensure you have the jsx-loader
configured as I have for the example build (webpack.config.js
).
Either do an offline transform with react-tools, or include the JSXTransformer
script before your script tag:
<script type="text/jsx" src="taginput.jsx"></script>
tags
: an array of stings representing tags to show when the component is mounted
Overriding styles is easy with the following class hierarchy:
taginput-container
(contains all, has border)input
(absolutely positioned right + bottom, with left used inline to indicate cursor offset, and width used inline to fill the container)taginput_tags
(contains tags, absolutely positioned)taginput_tag
taginput_tag:hover
taginput_x
(span indicating the tag can be removed)
To play around and re-run the example, build via Webpack with --watch
:
npm install webpack -g
npm install
webpack --watch