Implement a consumer component
- 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.