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 <Text> components.
Important - put only strings inside a <HyperlinkedText> 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:

<HyperlinkedText>You get regular URLs handling by default - https://www.kimaia.com</HyperlinkedText>
React JSX

Configure the default link style and on press behavior:

<HyperlinkedText
  linkStyle={{color: 'red'}}
  onLinkPress=text=>window.alert(`Pressed ${text}`)
>You get regular URLs handling by default - https://www.kimaia.com</HyperlinkedText>
React JSX

Pass in linkDefs array to configure custom regex and behavior:

<HyperlinkedText
  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](https://www.kimaia.com)
</HyperlinkedText>
React JSX

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}] []

LinkDef

Each link definition is an object with the following properties:

{
  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 */  
}
Js

GitHub

Kimaia/react-native-hyperlinked-text

??

— Read More

Download as zip