JSPM – react-process-string@1.2.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

The 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 config = [{
            regex: /(http|https):\/\/(\S+)\.([a-z]{2,}?)(.*?)( |\,|$|\.)/gim,
            fn: (key, result) => <span key={key}>
                                     <a target="_blank" href={`${result[1]}://${result[2]}.${result[3]}${result[4]}`}>{result[2]}.{result[3]}{result[4]}</a>{result[5]}
                                 </span>
        }, {
            regex: /(\S+)\.([a-z]{2,}?)(.*?)( |\,|$|\.)/gim,
            fn: (key, result) => <span key={key}>
                                     <a target="_blank" href={`http://${result[1]}.${result[2]}${result[3]}`}>{result[1]}.{result[2]}{result[3]}</a>{result[4]}
                                 </span>
        }];

        let stringWithLinks = "Watch this on youtube.com";
        let processed = processString(config)(stringWithLinks);

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

On the user side, processed will contain clickable links.

Example №2

let users = ourStore.users;
let stringWithUsername = "Hello @efog, how do you feel today?";

let processed = processString([{
    regex: /\@([a-z0-9_\-]+?)( |\,|$|\.)/gim, //regex to match a username
    fn: (key, result) => {
        let username = result[1];
        let foundUsers = users.filter(user => user.username === username);

        if (!foundUsers.length)
            return result[0]; //@username

        return <a key={key} href={`/user/${username}`}>@{username}</a>;
    }
}]);

This code allows us to make @usernames clickable.