https://github.com/mrgvsv/string2jsx

Convert a string to JSX Elements
https://github.com/mrgvsv/string2jsx

Last synced: 26 days ago
JSON representation

Convert a string to JSX Elements

• Host: GitHub
• URL: https://github.com/mrgvsv/string2jsx
• Owner: MrGVSV
• License: mit
• Created: 2020-04-12T09:32:03.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:16:34.000Z (about 2 years ago)
• Last Synced: 2024-11-27T19:17:57.570Z (about 1 month ago)
• Language: TypeScript
• Size: 911 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# String2JSX

[![npm version](https://badge.fury.io/js/string2jsx.svg)](https://badge.fury.io/js/string2jsx)

String2JSX converts an input string into a JSX Element. For an approach that does not return a Fragment or that has more control over its matches, try using [react-process-string](https://github.com/EfogDev/react-process-string).

## Usage

```jsx

let conversion = [

  {

    from: /Hello/,

    to: "Goodbye"

  },

  {

    from: /, world/,

    to: ,

    isChild: true

  },

  {

    from: /!/,

    to: ...,

    props: {

      className: 'kinda-dark-tbh'

    }

  }

]

    Hello, world!

  

// Output: 

<>

  Goodbyeworld...

>

```

## Installation

Install the module using [NPM](https://www.npmjs.com/get-npm):

```bash

npm i string2jsx

```

Then simply import it with:

```javascript

import String2JSX from 'string2JSX'

```

## Documentation

### Props

| Required Props | Type                | Required        | Description                                                  |

| -------------- | ------------------- | ------------------------------------------------------------ | -------------- |

| children       | `string` or `string[]` | yes | Contains the string (or array of strings) to be converted. |

| map            | `object`            | yes         | Contains all of the conversion mappins and their respective options. |

| parent | `JSX.Element` | no | Contains the conversions in the given parent element. Props on the given element will be maintained. Any props passed to the `String2JSX` element will be passed to this parent.

Defaults to `React.Fragment`. |

| defaultMatchGroup | `number` | no | Overrides all maps to default to the given regex match group.

Defaults to `0`. |

### Map Options

| Key         | Type                   | Required | Description                                                  |

| ----------- | ---------------------- | -------- | ------------------------------------------------------------ |

| from        | `RegExp`               | yes      | The regex used to find all matches within the string.        |

| to          | `JSX.Element` or `string` | yes      | The JSX Element to replace any found matches.                |

| props       | `object`               | no       | The props to pass to the new JSX Element (these can also go on the given "to" element). 

Defaults to `{}`. |

| isChild     | `boolean`              | no       | Sets the match (or the specified matchGroup) as the new JSX Element's "children" prop.

Defaults to `false`. |

| useForProps | `string[]`             | no       | Sets the match (or the specified matchGroup) to each  prop in this list for the new JSX Element.

Defaults to `[]`. |

| matchGroup  | `number`               | no       | Specifies the regex match group to use for the above options.

Defaults to `defaultMatchGroup`. |