` tag:
```json
// en.json
{
"myTextWithKeywords": "This is some text with special keywords that could appear anywhere in the document, but thanks to react-markup-formatter formatting them is now a trivial problem."
}
// ja.json
{
"myTextWithKeywords": "これは特別なキーワードの入ってるテキストです。このキーワードーが文書のどこでも現れることができますが、react-markup-formatterのお陰様で、問題がありません。"
}
```
```tsx
// my-component.tsx
const TextFormat = createTextFormat({
tagHandlers: {
keyword: (index, { children }) => {children};
}
});
export const MyComponent = () => {
const { t } = useTranslation();
return {t('myTextWithKeywords')};
}
```
### Support Full HTML
As described in the `createTextFormat` function API, an optional `defaultTagHandler` setting is available to catch every received tag that was not defined in `tagHandlers`.
By taking advantage of this option and leaving `tagHandlers` undefined, a behavior similar to the browser parsing can be provided to transform HTML code into React components with something similar to this example:
```tsx
const htmlHandler: CreateTextFormatConfig['defaultTagHandler'] = (
index,
{ name, children, attrs }
) => {
// React requires CSS properties to be an object with camelCased properties
// instead of the string provided in HTML for the "style" tag attribute
if (attrs.style) {
// convert from a string like `"font-weight: bold; color: red"`
// to an object like `{ fontWeight: 'bold', color: 'red' }`
const styles = attrs.style.split(';');
attrs.style = styles.reduce((acc, str) => {
const parts = str.trim().split(':');
if (!parts[0]) return acc;
const key = parts[0].replace(/-(.)/g, (match, char) =>
char.toUpperCase()
);
acc[key] = parts[1].trim();
return acc;
}, {});
}
// a key needs to be provided always
attrs.key = index.toString();
// React expects native HTML tags to be in lowercase while components
// are specified in PascalCase (and the tag `name` is provide in UPPERCASE)
const tagName = name.toLowerCase();
return createElement(tagName, attrs, children);
};
// create our text parser component
const HtmlToReact = createTextFormat({ defaultTagHandler: htmlHandler });
// and now we can use it like...
const text =
'This converts native HTML into React
';
{text};
```
Note that this is just a simple example and even if it takes care of the styles transformations, probably are other cases that needs to be handled (maybe `HtmlToReact` can be provided in a future version as an exported component by this library, **PR**s are welcomed!)
## Changelog
### v1.1.0
- Added the `hooks` option in `CreateTextFormatConfig`
- TypeScript (via generics) will detect if the 3rd parameter with the returned values is available in the `FormatTextHandler` and `FormatTagHandler` callbacks based on the provided options when calling `createTextFormat`.
### v1.0.0
- First release.
---
_Source: https://npm.io/package/react-markup-formatter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._