عکس cinaaaa
📛 Powerful Pure React Component For Hashtags and Mentions In Your React AppJavaScript
موضوع‌ها
۰
فورک‌ها
۴
ستاره‌ها
۲۳
تاریخ ایجاد
۲۱ آذر ۱۳۹۸
آخرین بروزرسانی
۸ ماه قبل
لایسنس
MIT License

React Tagify

📛 React Component For Extracting Hashtags, Mentions, Links In Your React App

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

oie_3162851d5gaPaFm

oie_3163031dwZ6pVBw

oie_3162943PEBY6ic9

oie_31641480Ic8MPad

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);

Props/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