1.0.0 • Published 5 months ago
string-format-jsx v1.0.0
string-format-jsx
A lightweight and framework-independent library for template string interpolation similar to JSX elements.
Install
pnpm add string-format-jsx
Usage
Core
Use with any framework
import { formatElements } from 'string-format-jsx';
formatElements('Hello, <a>@u3u</a>', {
createElement: (type, props, children) => yourFramework.createElement(type, props, children),
});
React
Use the entrance of React.createElement
by default
The
formatElements
is only used for replacing JSX elements and does not include string interpolation functionality. You can use it together with the built-ininterpolation
function or any other interpolation library.
import { formatElements } from 'string-format-jsx/react';
const result = formatElements('Hello, <a>@u3u</a>', {
components: {
a: (children) => <Link>{children}</Link>,
},
});
Trans Component (React)
Use interpolation
and formatElements
together.
import { Trans } from 'string-format-jsx/trans';
const result = (
<Trans
components={{
a: (children, key) => {
return (
<a
className="text-primary-500 hover:text-primary-400 transition"
key={key}
onClick={() => {
console.log(children);
}}
>
{children}
</a>
);
},
b: (children, key) => {
return (
<b className="font-medium" key={key}>
{children}
</b>
);
},
}}
text={dedent`
Hello, <a>The number is <b>{count}</b></a>
<br />
The number is <b>{count}</b>.
`}
values={{
count: 10,
}}
/>
);
Interpolation
Built-in support for simple string templates interpolation, you can use any other string interpolation library.
import { interpolation } from 'string-format-jsx';
const result = interpolation('Hello, {name} ({count})', {
values: {
count: 0,
name: 'u3u',
},
});
Examples
Vue2
import { formatElements, interpolation } from 'string-format-jsx';
export const Trans = {
functional: true,
name: 'Trans',
props: {
tag: { default: 'span', type: [String, Object, Function] },
text: String,
values: Object,
},
render: (h, { data, props, scopedSlots: slots }) => {
const { tag, text, values } = props;
return h(
tag,
data,
formatElements(interpolation(text, { values }), {
components: slots,
createElement: h,
}),
);
},
};
const vnode = (
<Trans
scopedSlots={{
a: (children) => {
return (
<a
class="cursor-pointer text-primary hover:text-primary-400"
onClick={() => {
console.log(children);
}}
>
{children}
</a>
);
},
b: (children) => <b class="font-medium">{children}</b>,
}}
text={dedent`
Hello, <a>The number is <b>{count}</b></a>
<br />
The number is <b>{count}</b>.
`}
values={{ count: 10 }}
/>
);
Thanks
Core extracted from next-translate.