k14v / k14v/react-i18njs

Implement a consumer component

Open
#18 0 comments 0 reactions 2 assignees Claimed by @Kelvur View on GitHub
enhancement good first issue
Dominant language
JavaScript
Stars
2
Forks
1
PR merge metrics
No merged PRs in 30d

Description

It would be easier to develop if `react-i18njs` provides a built-in consumer with a customizable arguments using a function called `createTrans`.

the name of component `Trans` came from the react implementation of [react-i18next](https://react.i18next.com/latest/trans-component)

## Real case scenario
```javascript
import React from "react";
import { createUseStyles } from "react-jss";
import { createTrans } from "@k14v/react-i18njss";
import styles from "./styles";

const useStyles = createUseStyles(styles);

const Trans = createTrans({
component: "a",
});

const Header = ({ children, ...restProps }) => {
const styles = useStyles(restProps);

return (

{children}





  • About


  • Install


  • Docs


  • Team


  • Blog


  • Forum





);
};

export default Header;

```

## Posible implementation

```javascript
import React from "react";
import PropTypes from "prop-types";
import { useI18n } from "@k14v/react-i18njs";

const parse = (value, i18n) => {
if (typeof children === "string") {
return value;
}

if (typeof children === "function") {
return value(i18n);
}

return null;
};

const Trans = ({ component: C, children, ...restProps }) => {
const i18n = useI18n();
const value = i18n.trls.__(parse(children, i18n));

if (C) {
return value;
}

return value;
};

Trans.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
};

export const createTrans = (defaults) => (props) => {
return ;
};

export default Trans;
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.