Componentify

Table of Contents

• NPM package
• Installation
• Usage
• Converters
• Expamples without component nesting
• Expamples with component nesting

NPM package

www.npmjs.com/package/react-componentify

Installation

$ npm install react-componentify

Usage

With this module you can match parts of plain text and convert them to React components.

Example use cases:

1. Bold/italics/underline etc. text formatting
2. Clickable links
3. Replacing \n with
4. Anything else you can think of - just create your own Converter!

Converters

Componentify comes with some Converters built-in, which you can use out of the box. Additionally, you may create a Converter yourself, suiting your particular use-case.

First, let's look at the built-in Converters:

• bold text:

const boldConverter = {
  regex: /\\*([\\w\\d\\s\\:\\/\\.\\[\\]]+)\\*/g,
  component: "span",
  props: {
    style: { fontWeight: "900" }
  },
  innerText: matches => matches[1]
};

• italic text:

const italicConverter = {
  regex: /\\_([\\w\\d\\s\\:\\/\\.\\[\\]]+)\\_/g,
  component: "span",
  props: {
    style: { fontStyle: "italic" }
  },
  innerText: matches => matches[1]
};

• link with href as a inner text or custom inner text

const linkConverter = {
  regex: /((?:https?:\/\/)?(?:[\da-z\.-]+)\.(?:[a-z\.]{2,6})(?:[-a-zA-Z0-9@:%_\+.~#?&//=]*)*\/?)(?:\[(.+?)\])?/g,
  component: "a",
  props: ([_, url]) => {
    return { href: url, targer: "_blank" };
  },
  innerText: matches => matches[2] || matches[1]
};

• <br/> tag

const brTagConverter = {
  regex: /<br\/>/,
  component: "br"
};

Componentify renders tree of components:

Prop Types

| Property | Type | Required? | Description | | ------------ | ------ | :-------: | ------------------------------------------------------------- | | text | string | ✓ | text you want to format | | converters | array | | Converters define how to match and componentify parts of text |

ComponentifyProps = {
  // required
  text: string,
  // optional
  converters: [
    {
      // required
      regex: RegExp,
      // required
      component: string | Class<React.Component<Props, any>>,
      // optional
      props: object | RegExp$matchResult => void,
      // optional
      innerText: Array<matchingGroup1, matchingGroup2> | RegExp$matchResult => matchingGroup1 | matchingGroup2
    }
  ]
}

Expamples without component nesting

• Style parts of text in bold

import Componentify, { boldConverter } from "react-componentify";

<Componentify
  text={"Тhis is bold *text* and *more* text"}
  converters={[boldConverter]}
/>;

• Style parts of text in italic

import Componentify, { italicConverter } from "react-componentify";

<Componentify text={"Тhis is italic _text_"} converters={[italicConverter]} />;

• Have clickable links

import Componentify, { linkConverter } from "react-componentify";

<Componentify
  text={"Тhis is https://google.com link"}
  converters={[linkConverter]}
/>;

• Have clickable links with custom inner text

import Componentify, { linkConverter } from "react-componentify";

<Componentify
  text={"Тhis is https://google.com[Google] link"}
  converters={[linkConverter]}
/>;

• Replace \n with

import Componentify, { brTagConverter } from "react-componentify";

<Componentify
  text={"Тhis is line one<br/>This is line two"}
  converters={[brTagConverter]}
/>;

• Replace words

import Componentify from "react-componentify";

<Componentify
  text="Hi, my name is John"
  converters={[
    {
      regex: /John/,
      component: "span",
      innerText: "Snow"
    }
  ]}
/>;

Expamples with component nesting

• Style parts of bold text in italic

import Componentify, {
  boldConverter,
  italicConverter
} from "react-componentify";

<Componentify
  text="Тhis is my *bold and _italic_* text"
  converters={[boldConverter, italicConverter]}
/>;

• Style liks in bold

import Componentify, { boldConverter, linkConverter } from "react-componentify";

<Componentify
  text="Тhis is my bold *https://google.com* link"
  converters={[boldConverter, linkConverter]}
/>;

You can make your custom converters