Skip to content

Document changes of 1.0.0-alpha. #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Document changes of 1.0.0-alpha. #88

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 38 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
# [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.
Expand Down Expand Up @@ -62,19 +58,48 @@ React.render(
```

## Props
### children
The children will be traversed and unless a node is an `a` or a `button` the content of a node will be matched using the matchDecorator.

_type:_ `React.node`

### componentDecorator
The componentDecorator is called for every matched link, the return-value is rendered in place of the link.

The `defaultComponentDecorator` returns an anchor-tag and does not modify the given href, the given key or the given text.

_type:_ `(href: string, text: string, key: number) => React.node`

_default:_ `defaultComponentDecorator`

### hrefDecorator
The hrefDecorator is called to determine how to transform the original link the href to be used.

The `defaultHrefDecorator` returns the original link without modification.

_type:_ `(href: string) => string`

_default:_ `defaultHrefDecorator`

### matchDecorator
The matchDecorator is used to find links in the `children`-prop.

The `text`-argument is the text found inside the `children`-prop.

The `defaultMatchDecorator` uses LinkyIt to find links.

_type:_ `(text: string) => Array<{ index: number, url: string, text: string }>`

_default:_ `defaultMatchDecorator`

**component**
The type of component to wrap links in.
_type:_ `any`
_default:_ `'a'`
### textDecorator
The textDecorator is called to determine how to display the link.

**properties**
The props that will be added to every matched component.
_type:_ `object`
_default:_ `{}`
The `defaultTextDecorator` returns the string without modification.

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.
_type:_ `(text: string) => string`

_default:_ `defaultTextDecorator`

## Customization

Expand Down