Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tasti/react-linkify
React component to parse links (urls, emails, etc.) in text into clickable links
https://github.com/tasti/react-linkify
Last synced: about 1 month ago
JSON representation
React component to parse links (urls, emails, etc.) in text into clickable links
- Host: GitHub
- URL: https://github.com/tasti/react-linkify
- Owner: tasti
- License: mit
- Created: 2015-05-29T07:29:56.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-01-05T10:04:28.000Z (11 months ago)
- Last Synced: 2024-10-30T01:44:27.459Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://tasti.github.io/react-linkify/
- Size: 346 KB
- Stars: 555
- Watchers: 3
- Forks: 106
- Open Issues: 50
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- project-awesome - tasti/react-linkify - React component to parse links (urls, emails, etc.) in text into clickable links (JavaScript)
README
# [react-linkify](http://tasti.github.io/react-linkify/)
React component to parse links (urls, emails, etc.) in text into clickable links
## Examples
Live examples are available at [http://tasti.github.io/react-linkify/](http://tasti.github.io/react-linkify/).
### Basic
Any link that appears inside the `Linkify` component will become clickable.
```
See examples at tasti.github.io/react-linkify/.
```
Renders to:
See examples at `tasti.github.io/react-linkify/`.
### Advanced
If you're feeling lazy, you can wrap `Linkify` around anywhere that you want links to become clickable. Even with nested elements, it traverses the tree to find links.
```
react-linkify (tasti.github.io/react-linkify/)
React component to parse links (urls, emails, etc.) in text into clickable links
See examples at tasti.github.io/react-linkify/.
Contact: [email protected]
```
Renders to:
react-linkify (`tasti.github.io/react-linkify/`)
React component to parse links (urls, emails, etc.) in text into clickable links
See examples at `tasti.github.io/react-linkify/`.
Contact: `[email protected]`
## Installation
```
yarn add react-linkify
```
or
```
npm install react-linkify --save
```
## Usage
```js
import Linkify from 'react-linkify';
React.render(
Examples are available at tasti.github.io/react-linkify/.,
document.body
);
```
## Props
**component**
The type of component to wrap links in.
_type:_ `any`
_default:_ `'a'`
**properties**
The props that will be added to every matched component.
_type:_ `object`
_default:_ `{}`
NOTE: Use `Linkify.MATCH` as a value to specify the matched link. The properties prop will always contain `{href: Linkify.MATCH, key: 'LINKIFY_KEY_#'}` unless overridden.
## Customization
You can access to the global `Linkify` instance used to linkify contents by importing it (`import { linkify } from 'react-linkify'`).
That way you can customize as needed (e.g. disabling existing schemas or adding new ones).
Note that any customization made to that instance will affect every `Linkify` component you use.
## Examples
All kind of links detectable by
[linkify-it](https://github.com/markdown-it/linkify-it) are supported. For
examples, visit [their website](http://markdown-it.github.io/linkify-it/).