# i18next-react-md

> i18next processor for rendering React.js with markdown

Latest version **0.0.1** (published 2021-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install i18next-react-md
pnpm add i18next-react-md
yarn add i18next-react-md
bun add i18next-react-md
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2021-08-10 |
| First published | 2021-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | macintoshhelper |

## Links

- npm: https://www.npmjs.com/package/i18next-react-md
- Repository: https://github.com/elemental-design/i18next-react-mdx
- Homepage: https://github.com/elemental-design/i18next-react-mdx#readme
- Issues: https://github.com/elemental-design/i18next-react-mdx/issues
- npm.io page: https://npm.io/package/i18next-react-md

## Dependencies (1)

- [markdown-to-jsx](https://npm.io/package/markdown-to-jsx.md) ^7.1.3

## Recent versions

- 0.0.1 (latest) — 2021-08-10
- 0.0.1-beta.0 — 2021-08-10

## README

# i18next-react-mdx
i18next processor for rendering React.js with mdx

**Note: This is an alpha release and the API may be unstable.**

## Getting Started

Make sure `i18next` and `react-i18next` are installed.

Installation:

```sh
npm i --save i18next-react-mdx
```

Create an i18next config file:

**i18n/index.js**

```js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// PATCH
import mdxProcessor, { markdownParser } from 'i18next-react-mdx';

const components = {
  h1: props => <h1 style={{color: 'tomato'}} {...props} />,
  Demo: () => <p>This is a demo component</p>
}
// END PATCH

// Data available in MDX:
const scope = {
  somethingInScope: 1
}

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
const resources = {
  en: {
    translation: {
      "title_md": "# Hello, **World!**",
      "welcome-to-react": "Welcome to React and react-i18next",
    }
  },
  fr: {
    translation: {
      "Welcome to React": "Bienvenue à React et react-i18next"
    }
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  // PATCH
  .use(mdxProcessor(markdownParser({ components, scope })))
  // END PATCH
  .init({
    resources,
    lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
    // if you're using a language detector, do not define the lng option

    interpolation: {
      escapeValue: false // react already safes from xss
    },
    postProcess: ['react-markdown'],
  });

export default i18n;
```

Import your `i18next` config into your React app.

**App.js**

```js
ReactDOM.render(
  <React.StrictMode>
  // PATCH
    <I18nextProvider i18n={i18n}>
  // END PATCH
      <App />
  // PATCH
    </I18nextProvider>
  // END PATCH
  </React.StrictMode>,
  document.getElementById('root')
);
```

## Usage

```js
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div className="App">
      {t('title_md')}
      <p>Hello, World!</p>
      <p>{t('welcome-to-react')}</p>
    </div>
  );
}
```

---
_Source: https://npm.io/package/i18next-react-md · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._