# react-native-parsed-text

> Parse text and make them into multiple React Native Text elements

Latest version **0.0.22** (published 2020-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-parsed-text
pnpm add react-native-parsed-text
yarn add react-native-parsed-text
bun add react-native-parsed-text
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.22 |
| Published | 2020-06-24 |
| First published | 2015-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 20.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1248 |
| Author | jrichardlai |
| Maintainers | bleonard, fbartho, jrichardlai |
| Keywords | text, react-native, url, phone, react, react-component |

## Links

- npm: https://www.npmjs.com/package/react-native-parsed-text
- Repository: https://github.com/taskrabbit/react-native-parsed-text
- Homepage: https://github.com/taskrabbit/react-native-parsed-text#readme
- Issues: https://github.com/taskrabbit/react-native-parsed-text/issues
- npm.io page: https://npm.io/package/react-native-parsed-text

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.x

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.22 (latest) — 2020-06-24
- 0.0.22-beta.3 — 2020-06-11
- 0.0.22-beta.2 — 2020-06-11
- 0.0.22-beta.1 — 2020-06-11
- 0.0.21 — 2018-11-15
- 0.0.20 — 2017-10-11
- 0.0.19 — 2017-10-02
- 0.0.18 — 2017-04-18
- 0.0.17 — 2017-03-18
- 0.0.16 — 2016-09-24
- 0.0.15 — 2016-06-18
- 0.0.13 — 2016-05-26
- 0.0.12 — 2016-05-06
- 0.0.11 — 2016-01-28
- 0.0.10 — 2015-12-23
- … 9 more at https://npm.io/package/react-native-parsed-text/versions

## README

# React Native Parsed Text

This library allows you to parse a text and extract parts using a `RegExp` or predefined patterns.
Currently there are 3 predefined types: `url`, `phone` and `email`.

All the props are passed down to a new `Text` Component if there is a matching text. If those are functions they will receive as param the value of the text.

## Proptypes

`ParsedText` can receive [Text PropTypes](https://facebook.github.io/react-native/docs/text.html).

`parse`: Array of parsed text.
* to use the predefined type: `{type: 'url'}`.
* to use your own `RegExp`: `{pattern: /something/}`.

`renderText`: Function called to change the displayed children.

`childrenProps` : Properties to pass to the children elements generated by react-native-parsed-text.

eg:
Your str is ```'Mention [@michel:5455345]'``` where 5455345 is ID of this user and @michel the value to display on interface.
Your pattern for ID & username extraction : ```/\[(@[^:]+):([^\]]+)\]/i```
Your renderText method :
```
renderText(matchingString, matches) {
  // matches => ["[@michel:5455345]", "@michel", "5455345"]
  let pattern = /\[(@[^:]+):([^\]]+)\]/i;
  let match = matchingString.match(pattern);
  return `^^${match[1]}^^`;
}
```
Displayed text will be : ```Mention ^^@michel^^```

## Example

```javascript
import ParsedText from 'react-native-parsed-text';

class Example extends React.Component {
  static displayName = 'Example';

  handleUrlPress(url, matchIndex /*: number*/) {
    LinkingIOS.openURL(url);
  }

  handlePhonePress(phone, matchIndex /*: number*/) {
    AlertIOS.alert(`${phone} has been pressed!`);
  }

  handleNamePress(name, matchIndex /*: number*/) {
    AlertIOS.alert(`Hello ${name}`);
  }

  handleEmailPress(email, matchIndex /*: number*/) {
    AlertIOS.alert(`send email to ${email}`);
  }

  renderText(matchingString, matches) {
    // matches => ["[@michel:5455345]", "@michel", "5455345"]
    let pattern = /\[(@[^:]+):([^\]]+)\]/i;
    let match = matchingString.match(pattern);
    return `^^${match[1]}^^`;
  }

  render() {
    return (
      <View style={styles.container}>
        <ParsedText
          style={styles.text}
          parse={
            [
              {type: 'url',                       style: styles.url, onPress: this.handleUrlPress},
              {type: 'phone',                     style: styles.phone, onPress: this.handlePhonePress},
              {type: 'email',                     style: styles.email, onPress: this.handleEmailPress},
              {pattern: /Bob|David/,              style: styles.name, onPress: this.handleNamePress},
              {pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText},
              {pattern: /42/,                     style: styles.magicNumber},
              {pattern: /#(\w+)/,                 style: styles.hashTag},
            ]
          }
          childrenProps={{allowFontScaling: false}}
        >
          Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.
          But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com
          And the magic number is 42!
          #react #react-native
        </ParsedText>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  url: {
    color: 'red',
    textDecorationLine: 'underline',
  },

  email: {
    textDecorationLine: 'underline',
  },

  text: {
    color: 'black',
    fontSize: 15,
  },

  phone: {
    color: 'blue',
    textDecorationLine: 'underline',
  },

  name: {
    color: 'red',
  },

  username: {
    color: 'green',
    fontWeight: 'bold'
  },

  magicNumber: {
    fontSize: 42,
    color: 'pink',
  },

  hashTag: {
    fontStyle: 'italic',
  },

});
```

![](https://cloud.githubusercontent.com/assets/159813/11152673/d5fe86f0-89e8-11e5-8b5e-f3c06bdc1b6b.gif)

## Install

`npm install --save react-native-parsed-text`

## TODO

* Add nested text parsing

---
_Source: https://npm.io/package/react-native-parsed-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._