React Tagify
Install
$ yarn add react-tagify
or
$ npm i react-tagify
Usage
import React from "react";
import ReactDOM from "react-dom";
import { ReactTagify } from "react-tagify";
function App() {
return (
<div>
<ReactTagify
colors={"red"}
tagClicked={(tag)=> alert(tag)}>
<p>
“You might not think that #programmers are #artists,
but programming is an extremely creative #profession.
Its logic-based creativity�
@JohnRomero
</p>
</ReactTagify>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Demo
Use custom styling
Provide custom styling to tags and mentions
import React from "react";
import ReactDOM from "react-dom";
import { ReactTagify } from "react-tagify";
function App() {
const tagStyle = {
color: 'red',
fontWeight: 500,
cursor: 'pointer'
};
const mentionStyle = {
color: 'green',
textDecoration: 'underline',
cursor: 'pointer'
}
return (
<div>
<ReactTagify
tagStyle={tagStyle}
mentionStyle={mentionStyle}
tagClicked={(tag) => alert(tag)}
>
<p>
“You might not think that #programmers are #artists,
but programming is an extremely creative #profession.
Its logic-based creativity�
@JohnRomero
</p>
</ReactTagify>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);Detect Links 🆕
Detect Links and Custom Styles
import React from "react";
import ReactDOM from "react-dom";
import { ReactTagify } from "react-tagify";
function App() {
const linkStyle = {
color: 'green',
textDecoration: 'underline',
cursor: 'pointer'
}
return (
<div>
<ReactTagify
linkStyle={linkStyle}
tagClicked={(tag) => alert(tag)}
detectLinks
detectMentions={false}
detectHashtags={false}
>
<p>
“You might not think that #programmers are #artists,
but programming is an extremely creative #profession.
Its logic-based creativity�
https://google.com
@JohnRomero
</p>
</ReactTagify>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);Test
You Can Simply Test React Tagify with
yarn testor
npm testProps/Options
| Name | Type | Default | Description |
|---|---|---|---|
| tagClicked | PropTypes.func | null | Trigger a function and Its Return You The Tag Clicked |
| colors | PropTypes.string | '#0073e6' (Navy Blue) | Custom Color on Tags |
| tagStyle | PropTypes.object | undefined | Custom style for tags |
| linkStyle | PropTypes.object | undefined | Custom style for links |
| mentionStyle | PropTypes.object | undefined | Custom style for mentions |
| detectHashtags | PropTypes.bool | true | detecting Hashtags enabled |
| detectMentions | PropTypes.bool | true | detecting Mentions enabled |
| detectLinks | PropTypes.bool | true | detecting Links enabled |
Issues
The recommended medium to report and track issues is by opening one on Github.