TypeScript port of react-process-string, library to process strings with regular expressions.
npm install react-process-string-tsThe main changes from the original JS version are:
- TypeScript support
- Added ProcessStringOption interface
- Typed processString() function
- Updated processString() function to
- support replacements in nested JSX elements
- always return data of the correct type (c.f., flatMap() vs. previously map())
npm install react-process-string-ts --save
Syntax
javascript
processString(options)(string);
`Options should be an array of objects containing
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
$3
`typescript jsx
import React, { FunctionComponent } from 'react';
import processString, { ProcessStringOption } from 'react-process-string-ts';interface Props {}
const ProcessStringExample: FunctionComponent = ({}) => {
const config: ProcessStringOption[] = [
{
regex: /(\S+)\.([a-z]{2,}?)(.*?)( |,|$|\.)/gim,
fn: (key, result) => (
http://${result[1]}.${result[2]}${result[3]}} rel="noreferrer">
{result[1]}.{result[2]}
{result[3]}
{result[4]}
),
},
];
const stringWithLinks = 'Watch this on youtube.com.';
const processed = processString(config)(stringWithLinks);
return <>{processed};
};
export default ProcessStringExample;
`
On the user side, will contain clickable links.$3
`typescript jsx
import React from 'react';
import processString from 'react-process-string-ts';const users = [
{
username: 'testuser',
},
];
const stringWithUsername = 'Hello @testuser, how do you feel today?';
const processor = processString([
{
regex: /@([a-z0-9_\-]+?)( |,|$|\.)/gim, //regex to match a username
fn: (key, result) => {
const username = result[1];
const foundUsers = users.filter((user) => user.username === username);
if (!foundUsers.length) return result[0]; //@username
return (
/user/${username}}>
@{username}
);
},
},
]);
const processed = processor(stringWithUsername);
`
This code allows to make