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: about 1 year 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 (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-07T12:54:28.000Z (over 7 years ago)
- Last Synced: 2025-04-02T03:11:11.276Z (about 1 year ago)
- Language: HTML
- Homepage: https://redsift.github.io/i18next-react-markdown/
- Size: 1.29 MB
- Stars: 0
- Watchers: 18
- 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);
```