manpreet singh manpreet singh - 1 month ago 22
Javascript Question

Stying in React-tag-input

I am using "React-tag-input" react-tag-input.

But can't find how to do styling of react-tag-input

my code looks like this

import { WithContext as ReactTags } from 'react-tag-input';

const App = React.createClass({
getInitialState() {
return {
tags: [],
suggestions: []
}
},

handleDelete(i) {
let tags = this.state.tags;
tags.splice(i, 1);
this.setState({tags: tags});
},

handleAddition(tag) {
let tags = this.state.tags;
tags.push({
id: tags.length + 1,
text: tag
});
this.setState({tags: tags});
},

handleDrag(tag, currPos, newPos) {
let tags = this.state.tags;
tags.splice(currPos, 1);
tags.splice(newPos, 0, tag);
this.setState({ tags: tags });
},


render() {
let tags = this.state.tags;
let suggestions = this.state.suggestions;
return (
<div>


I am looking for styling in ReactTags

<ReactTags tags={tags}
suggestions={suggestions}
handleDelete={this.handleDelete}
handleAddition={this.handleAddition}
handleDrag={this.handleDrag} />
</div>
)
}
});

ReactDOM.render(<App />, document.getElementById('app'));


Can you guide me, how to do styling in this??

Answer

You can use CSS. From the documentation:

<ReactTags> does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. By default, the component provides the following classes with which you can style -

  • ReactTags__tags
  • ReactTags__tagInput
  • ReactTags__tagInputField
  • ReactTags__selected
  • ReactTags__selected ReactTags__tag
  • ReactTags__selected ReactTags__remove
  • ReactTags__suggestions

So, if you want to change the background of a tag, you could do something like this in your CSS:

.ReactTags__tag {
  background-color: red;
}