reason-tags-input
A React component for inputting tags in a user friendly way
Install
$ npm install --save reason-tags-input
Usage
// import the react component;// optionally, import the default styles.; { superprops; thisstate = tags: thishandleTagInput = thishandleTagInput; thishandleTagRemove = thishandleTagRemove; thishandleTagsClear = thishandleTagsClear; } { this; } { this; } { this; } { return <div> <TagsInput onTagInput=thishandleTagInput onTagRemove=thishandleTagRemove onClear=thishandleTagsClear /> </div> ; }
Props:
onTagInput
(Required) (callback) for when a tag is enteredonTagRemove
(Required) (callback) for when a tag is removedonClear
(Optional) (callback) for when all tags are clearedclearAllText
(Optional) (string) use a different clear text than the default ("Clear all")
Click Here for an example you can run and play around with.
Made in ReasonML
This project is made in ReasonML and uses the ReasonReact bindings to play along with React.
here's a nice book on ReasonML
Contribute
Run this project:
npm install
npm start
# in another tab
npm run webpack
After you see the webpack compilation succeed (the npm run webpack
step), open up the nested html files in src/*
(no server needed!). Then modify whichever file in src
and refresh the page to see the changes.
For more elaborate ReasonReact examples, please see https://github.com/reasonml-community/reason-react-example
The flow
By doing npm start
you are running the Reason compiler and watching for changes to Reason files (.re). When you make a change to one, it compiles it to JavaScript (.bs.js) through BuckleScript. When that happens, webpack picks up and does it's thing and throws the bundle to build/index.js. So it's a 2 step process:
BuckleScript -> Webpack -> output