Skip to content
master
Go to file
Code

Latest commit

pawan_m02111
pawan_m02111 v0.0.19
bafc411

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Apr 18, 2016
Dec 24, 2019
src
Dec 24, 2019
Apr 18, 2016
Mar 22, 2019
Dec 24, 2019
Dec 10, 2019
Dec 24, 2019

README.md

react-native-hyperlink

NPM version Awesome

A <Hyperlink /> component for react-native & react-native-web that makes urls, fuzzy links, emails etc clickable

demo

Installation

npm i --save react-native-hyperlink

Props

name desc type default
linkify linkify-it object, for custom schema object require('linkify-it')()
linkStyle highlight clickable text with styles Text.propTypes.style
linkText A string or a func to replace parsed text oneOfType([ string, func ])
onPress Func to handle click over a clickable text with parsed text as arg func
onLongPress Func to handle long click over a clickable text with parsed text as arg func
linkDefault A platform specific fallback to handle onPress. Uses Linking. Disabled by default bool
injectViewProps Func with url as a param to inject props to the clickable component func i => ({})

Examples

Wrap any component that has <Text> (works for nested text too) in it

import Hyperlink from 'react-native-hyperlink'

export const defaultLink = () =>
  <Hyperlink linkDefault={ true }>
    <Text style={ { fontSize: 15 } }>
      This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.
    </Text>
  </Hyperlink>

export const regularText = () =>
  <Hyperlink onPress={ (url, text) => alert(url + ", " + text) }>
    <Text style={ { fontSize: 15 } }>
      This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.
    </Text>
  </Hyperlink>

export const regularTextLongPress = () =>
  <Hyperlink onLongPress={ (url, text) => alert(url + ", " + text) }>
    <Text style={ { fontSize: 15 } }>
      This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable for long click.
    </Text>
  </Hyperlink>

export const nestedText = () =>
  <Hyperlink onPress={ (url, text) => alert(url + ", " + text) }>
    <View>
      <Text style={ { fontSize: 15 } }>
        A nested Text component https://facebook.github.io/react-native/docs/text.html works equally well <Text>with https://github.com/obipawan/hyperlink</Text>
      </Text>
    </View>
  </Hyperlink>

export const highlightText = () =>
  <Hyperlink linkStyle={ { color: '#2980b9', fontSize: 20 } }>
    <Text style={ { fontSize: 15 } }>
      Make clickable strings like https://github.com/obipawan/hyperlink stylable
    </Text>
  </Hyperlink>

export const parseAndReplace = () =>
  <Hyperlink
    linkStyle={ { color: '#2980b9', fontSize: 20 } }
    linkText={ url => url === 'https://github.com/obipawan/hyperlink' ? 'Hyperlink' : url }
  >
    <Text style={ { fontSize: 15 } }>
      Make clickable strings cleaner with https://github.com/obipawan/hyperlink
    </Text>
  </Hyperlink>

export const passPropsText = () =>
  <Hyperlink
    linkDefault
    injectViewProps={ url => ({
          testID: url === 'http://link.com' ? 'id1' : 'id2' ,
          style: url === 'https://link.com' ? { color: 'red' } : { color: 'blue' },
          //any other props you wish to pass to the component
    }) }
  >
    <Text>You can pass props to clickable components matched by url.
        <Text>This url looks red https://link.com
    </Text> and this url looks blue https://link2.com </Text>
  </Hyperlink>

Dependenies

linkify-it

Development

PRs highly appreciated

License

MIT License

You can’t perform that action at this time.