https://github.com/redsift/i18next-react-markdown

Embed React elements using markdown in i18next translation strings
https://github.com/redsift/i18next-react-markdown

Last synced: 6 days ago
JSON representation

Embed React elements using markdown in i18next translation strings

• Host: GitHub
• URL: https://github.com/redsift/i18next-react-markdown
• Owner: redsift
• Created: 2018-07-06T13:59:40.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-07T12:54:28.000Z (about 6 years ago)
• Last Synced: 2024-12-15T02:34:24.777Z (12 days ago)
• Language: HTML
• Homepage: https://redsift.github.io/i18next-react-markdown/
• Size: 1.29 MB
• Stars: 0
• Watchers: 19
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# i18next-react-markdown

Embed React elements using markdown in i18next translation strings.

This wraps `marksy` with an HTML element and React component config import util.

## Getting Started

### Install and Build

```sh

npm install

```

### Storybook

#### Run local storybook

```sh

npm start

```

#### Build storybook

```sh

npm run storybook:build

```

> outputs static storybook site to `docs/`

## Usage

This can be used in your own project and elements can be overriden with custom React components.

Locale keys must have the suffix: `_md` to use markdown.

### Locale usage

Example locale JSON

```json

{

  "website": "Website",

  "website-header_md": "Visit $t(website)"

}

```

> returns "`Visit Website`"

### i18next processor initialisation

```js

import mdProcessor, { parser as mdParser } from 'i18next-react-markdown';

const elements = {

  h1({ id, children }: Attributes) {

    return (

      


        {children}

      

    );

  },

}


const components = {

  Card({ children }: Attributes) {

    return (

      


        {children}

      

    );

  },

}


const mdProcessor = createProcessor({

  elements,

  components,

  marksyOptions: {} // additional marksy input after elements and components

  markedOptions: {}

});

i18n

  .use(mdProcessor)

  .init({

    // ...

    postProcess: ['react-markdown'],

    // ...

  })

```

## Editor usage

```js

import Editor from 'i18next-react-markdown/Editor';

return (

  

)

```

## Markdown parser usage

```js

import { parser as createMdParser } from 'i18next-react-markdown';

const mdParse = createMdParser(elements, components);

```