HyperlinkedText

Text component for React Native with regex defined hyperlinks.

Heavily inspired from react-native-hyperlink.

The difference is that with react-native-hyperlink you use linkify which I couldn't configure to detect arbitrary regex without prefix (e.g. '1:00'). If you only need to detect regexs with prefixes (e.g. mentions with '@' or links with 'schema://') then use hyperlink. react-native-hyperlink also supports nesting components.
Important - put only strings inside a component. There is no way to nest components right now.

Installation

npm install --save react-native-hyperlinked-text or
yarn add react-native-hyperlinked-text

Usage Examples

The default behavior is to identify URLs and open web browser when they are clicked:
``JSX
You get regular URLs handling by default - https://www.kimaia.com
`

Configure the default link style and on press behavior:
`JSX
linkStyle={{color: 'red'}}
onLinkPress=text=>window.alert(Pressed ${text})
>You get regular URLs handling by default - https://www.kimaia.com
`

Pass in linkDefs array to configure custom regex and behavior:
`JSX
style={styles.entry}
linkDefs={[
{
regex: /\[(.?)\]\((.?)\)/mgi,
style: {color: 'red'},
replaceText: (orig, text, url) => text,
onPress: (orig, text, url) => HyperlinkedText._openWebUrl(url)
}
]}>
Use markdown style links Kimaia

`


Props

| Prop | Description | Example | Default |
| --- | --- | --- | --- |
| style | The style of the entire component | style={{backgroundColor:'blue'}} | None |
| linkStyle | Default style for links. Can be overriden in linkDef.style | linkStyle={{color: 'purple'}} | {{color:'#0000EE'}} |
| onLinkPress | Default handler for link presses | onLinkPress={text=>window.alert(text)} | Open browser |
| linkDefs | Array of linkDef definitions. See below. | linkDefs=[{regex:/\d+/mgi}] | [] |

$3

Each link definition is an object with the following properties:

`JS
{
regex: /regex/mgi, / The regex to match. You can capturing groups and you probably want to add the 'm' and 'g' flags to search in entire text. If you use capturing groups they will be passed to your handlers/
onPress: (wholeMatch, ...capturingGroups) => {}, / optional - handler for presses. Receives the whole match and the capturing groups. If you don't specify a handler, the default handler will be used /
noPress: false, / optional - set to false to disable presses. Default is false /
style: {}, / optional - style for link. If undefined then default link style will be used /
replaceText: (wholeMatch, ...capturingGroups) => newText / optional - the match will be replaced with whatever you return here /
}
``

^{© 2017 Kimaia LTD}