-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #39 from cinaaaa/refactor/new
Refactor/new
- Loading branch information
Showing
45 changed files
with
12,671 additions
and
12,966 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| { | ||
| "env": { | ||
| "browser": true, | ||
| "es2021": true | ||
| }, | ||
| "extends": [ | ||
| "plugin:react/recommended", | ||
| "standard-with-typescript" | ||
| ], | ||
| "overrides": [ | ||
| ], | ||
| "parserOptions": { | ||
| "ecmaVersion": "latest", | ||
| "sourceType": "module" | ||
| }, | ||
| "plugins": [ | ||
| "react" | ||
| ], | ||
| "rules": { | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -102,3 +102,5 @@ dist | |
|
|
||
| # TernJS port file | ||
| .tern-port | ||
| packages/my-site/src/App.tsx | ||
| .DS_Store | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| #!/usr/bin/env sh | ||
| . "$(dirname -- "$0")/_/husky.sh" | ||
|
|
||
| # npm run lint | ||
| # yarn lint-staged |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,112 +1,72 @@ | ||
| # React Tagify | ||
| 📛 React Component For Extracting Hashtags, Mentions, Links In Your React App | ||
|  | ||
| # React Tagify #️@🔥 | ||
| Empower your React applications with effortless #tag and @mention support ❤️ | ||
| <br /> | ||
| <br /> | ||
| <img src="https://img.shields.io/github/package-json/v/E-RROR/react-tagify/master?color=green&label=Version&style=flat-square"/> | ||
| <span> | ||
| <img src="https://img.shields.io/npm/v/react-tagify?color=red&style=flat-square" /> | ||
| </span> | ||
| <span> | ||
| <img src="https://img.shields.io/codefactor/grade/github/E-RROR/react-tagify?style=flat-square" /> | ||
| </span> | ||
|
|
||
| ### Install | ||
| ``` | ||
| $ yarn add react-tagify | ||
| ``` | ||
| or | ||
| ``` | ||
| $ npm i react-tagify | ||
| ``` | ||
| ### Usage | ||
| ```jsx | ||
| 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); | ||
| ``` | ||
| <img src="https://img.shields.io/github/package-json/v/cinaaaa/react-tagify/master?color=green&label=Version&style=flat-square"/> | ||
|
|
||
| ### Demo | ||
| React Tagify is a powerful and pure React component for handling hashtags and mentions in your React app with ease. Give your users the ability to mention others and add tags to their content seamlessly. | ||
|
|
||
|  | ||
| For more information and demo, visit our website [here](https://cinaaaa.github.io/react-tagify/). | ||
|
|
||
|  | ||
| ## Features | ||
|
|
||
|  | ||
| - 🚀 Easy to integrate | ||
| - 🎨 Customizable colors and styles | ||
| - 🔗 Supports #HashTags and @Mentions | ||
| - 📦 Lightweight | ||
|
|
||
|  | ||
| ## Installation | ||
|
|
||
| Install the package using npm or yarn: | ||
|
|
||
| ### Use custom styling | ||
| Provide custom styling to tags and mentions | ||
| ```bash | ||
| npm i react-tagify | ||
| ``` | ||
|
|
||
| or | ||
|
|
||
| ```bash | ||
| yarn add react-tagify | ||
| ``` | ||
| ## Usage | ||
|
|
||
| 1. Import the Tagify component: | ||
|
|
||
| ```js | ||
| import { Tagify } from 'react-tagify'; | ||
| ``` | ||
|
|
||
| 2. Wrap your content with the Tagify component: | ||
|
|
||
| ```jsx | ||
| 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); | ||
| <Tagify | ||
| onClick={(type, value) => console.log(type, value)} | ||
| tagStyle={{ fontWeight: 'bold' }} | ||
| mentionStyle={{ fontStyle: 'italic' }} | ||
| detectHashtags | ||
| detectMentions | ||
| > | ||
| <p> | ||
| This is an example of a #hashtag and a @mention inside a Tagify component. | ||
| </p> | ||
| </ReactTagify> | ||
| ``` | ||
|
|
||
| ### 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 | | ||
| ## Props | ||
|
|
||
| | Prop | Type | Default | Description | | ||
| |----------------|----------|---------|-------------------------------------------------------------------| | ||
| | children | ReactNode | - | The content to be processed for tags and mentions. | | ||
| | colors | string | '#0073e6' | The color of the tags and mentions. | | ||
| | onClick | function | - | A callback function that is called when a tag or mention is clicked. Receives the clicked element as an argument. | | ||
| | tagStyle | object | - | The CSS style object for hashtag styling. | | ||
| | mentionStyle | object | - | The CSS style object for mention styling. | | ||
| | detectHashtags | boolean | true | Enable or disable the detection of hashtags. | | ||
| | detectMentions | boolean | true | Enable or disable the detection of mentions. | | ||
|
|
||
|
|
||
| ## Contributing | ||
| Please feel free to contribute by submitting a pull request or reporting any issues you encounter while using this component. | ||
|
|
||
| ## License | ||
| React Tagify is licensed under the MIT License. |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.