react-native-highlighter-x

Library for highlighting texts in React-Native

Installation

npm install react-native-highlighter-x

Usage

import HightlighterX from 'react-native-highlighter-x';

// ...

const rules = [
	{
		pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
		style: {color: 'white', backgroundColor: 'blue', padding: 3},
		onPress: (word : string) => Linking.openURL(`mailto:${word}`),
	},
	{
		pattern: /^https?:\/\/[^\s$.?#].[^\s]*$/,
		style: {color: 'white', backgroundColor:'green'},
		onPress: (word : string) => Linking.openURL(word),
	},
	{
		pattern: /@(\w+)/g,
		style: {color: '#0f0fc0', fontWeight:'bold'},
		onPress: (username : string) => {
			console.log("Clicked username: ", username);
		},
		onLongPress: (username : string) => {
			console.log("Long pressed : ", username);
		}
	},
	{
		pattern: /\b(\d{1,3}(\.\d{1,3}){3})\b/g,
		style: {color: 'red'},
		onPress: (ip : string) => {
			console.log("Clicked IP address: ", ip);
		}
	},
	{
		pattern: /\b(\+?\d{1,4}?[-.\s]?)?\(?\d{1,4}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,9}\b/g,
		style: {color: 'purple'},
		onPress: (phoneNumber : string) => {
			console.log("Clicked phone number: ", phoneNumber);
		}
	},
	// Add more custom rules as needed
	];

<HighlighterX 
	rules={rules}
	customTextStyle={{fontWeight:'500'}}
	customContainerStyle={{backgroundColor: 'white', padding:10}}
	nonMatchTextStyle={{color:'#666'}}
	text={"Hello, today is a very beautiful day! If you want to check out our new project, you can visit https://npmjs.com For questions, you can reach [email protected]. Also, you can follow the users @turgay and @ali to stay updated with the latest developments. In case of an emergency, please contact us at +90 555 444 3322. Our server's IP address has been updated to 192.168.1.1."}
/>

Props of Text

Props of HighlighterX

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library