Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/taskrabbit/react-native-parsed-text
Parse text and make them into multiple React Native Text elements
https://github.com/taskrabbit/react-native-parsed-text
parsing react-native
Last synced: 2 days ago
JSON representation
Parse text and make them into multiple React Native Text elements
- Host: GitHub
- URL: https://github.com/taskrabbit/react-native-parsed-text
- Owner: taskrabbit
- License: mit
- Created: 2015-11-12T17:16:33.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-06-09T06:21:16.000Z (over 1 year ago)
- Last Synced: 2024-10-29T15:35:29.109Z (2 months ago)
- Topics: parsing, react-native
- Language: JavaScript
- Homepage:
- Size: 1.29 MB
- Stars: 1,211
- Watchers: 22
- Forks: 163
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-react-native - react-native-parsed-text ★552 - Parse text and make them into multiple React Native Text elements (Components / UI)
- awesome-reactnative-ui - react-native-parsed-text - 89e8-11e5-8b5e-f3c06bdc1b6b.gif)| (Others)
- awesome-react-native - react-native-parsed-text ★552 - Parse text and make them into multiple React Native Text elements (Components / UI)
- awesome-reactnative-ui - react-native-parsed-text - 89e8-11e5-8b5e-f3c06bdc1b6b.gif)| (Others)
- awesome-react-native - react-native-parsed-text ★552 - Parse text and make them into multiple React Native Text elements (Components / UI)
- awesome-react-native-ui - react-native-parsed-text ★239 - Parse text and make them into multiple React Native Text elements (Components / UI)
- awesome-react-native - react-native-parsed-text ★552 - Parse text and make them into multiple React Native Text elements (Components / UI)
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 (
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. [email protected]
And the magic number is 42!
#react #react-native
);
}
}
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',
},
});
```
## Install
`npm install --save react-native-parsed-text`
## TODO
* Add nested text parsing