JSPM – react-process-string@0.1.0

Package Exports

react-process-string

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-process-string) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-process-string

This library allows you to process strings with regular expressions in ReactJS.

Installation

Via npm:

npm install react-process-string --save

Syntax

processString(options)(string);

Options should be an array of objects containing regex and fn fields. fn is a function that takes two arguments: key, to pass it to a react component and result — the result of regex executing.

Example usage

const processString = require('react-process-string');

class HelloWorld extends React.Component {
    render() {
        let stringWithLinks = "Watch this on youtube.com";
        let processed = processString([{
            regex: /(http|https):\/\/(\S+)\.([a-z]{2,}?)(.*?)( |\,|$|\.)/gim,
            fn: (key, result) => <a key={key} target="_blank" href={`${result[1]}://${result[2]}.${result[3]}${result[4]}`}>{result[2]}.{result[3]}{result[4]}</a>
        }, {
            regex: /(\S+)\.([a-z]{2,}?)(.*?)( |\,|$|\.)/gim,
            fn: (key, result) => <a key={key} target="_blank" href={`http://${result[1]}.${result[2]}${result[3]}`}>{result[1]}.{result[2]}{result[3]}</a>
        }])(string);

        return (
            <div>Hello world! {processed}</div>
        );
    }
}

On the user side, processed will contain clickable links.