Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pladaria/react-linkifier
Tiny React library to create links from text
https://github.com/pladaria/react-linkifier
Last synced: about 2 months ago
JSON representation
Tiny React library to create links from text
- Host: GitHub
- URL: https://github.com/pladaria/react-linkifier
- Owner: pladaria
- License: mit
- Created: 2016-03-01T14:13:07.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-31T14:03:45.000Z (about 7 years ago)
- Last Synced: 2024-11-06T08:59:23.624Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 127 KB
- Stars: 10
- Watchers: 2
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
react-linkifier
Tiny React library to create links from text
## Features
- Very small (~2KB minified and gzipped)
- Zero external dependencies
- Use it as function or component
- Works great with complex URLs and handles many corner cases
- Allows custom props to be applied to <a> elements
- Automatically prepends `http://` to the href or `mailto:` for emails
## Live demo
[Demo](https://runkit.com/pladaria/react-linkifier-demo)
## Install
```javascript
npm install --save react-linkifier
```
## Basic usage
### As component
```javascript
import Linkifier from 'react-linkifier';
const MyComponent = () => (
check this: www.example.org
);
// Render result:
//
```
### As function
```javascript
import {linkifier} from 'react-linkifier';
const MyComponent = () => (
{linkifier('www.example.org')}
);
// Render result:
//
```
## Advanced usage
### As component
`className` and other props are assigned to the link elements.
```javascript
import Linkifier from 'react-linkifier';
const MyComponent = () => (
www.example.org
);
// Render result:
//
```
#### With custom renderer
If you want to change the way `` renders links, for example when you want to use a custom component instead of ``, you can use the `renderer` prop:
```javascript
import Linkifier from 'react-linkifier';
const RedLink = ({href, children}) => (
{children}
);
const MyComponent = () => (
www.example.org
);
// Render result:
//
```
#### Ignore elements
Use the `ignore` prop to skip some children. By default ignores `a` and `button`
```javascript
const ignore = [...Linkifier.DEFAULT_IGNORED, 'pre'];
const MyComponent = () => (
http://example.org
example
http://example.org
);
// None of these urls will be linkified
```
### As function
```javascript
import {linkifier} from 'react-linkifier';
const text = 'check this: www.example.org';
const MyComponent = () => (
{linkifier(text, {target: '_blank', className: 'link'})}
);
// Render result:
//
```
#### With custom renderer
When using ``linkifier`` as a function you can also pass a custom renderer:
```javascript
import {linkifier} from 'react-linkifier';
const RedLink = ({href, children}) => (
{children}
);
const text = 'check this: www.example.org';
const MyComponent = () => (
{linkifier(text, {renderer: RedLink})}
);
// Render result:
//
```
## Options
- `protocol`: this protocol will be used if the protocol part is missing
- `renderer`: pass a component to use a custom link renderer, defaults to `a`.
- `ignore`: list of elements to ignore (defaults to `['a', 'button']`)
- Rest of properties of the options object (eg: `style`, `className`) or props of the `Linkifier` component are passed as props to the link element
## License
MIT
## Credits
Artwork by [emojione.com](emojione.com)