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

[!TIP]

The formatElements is only used for replacing JSX elements and does not include string interpolation functionality. You can use it together with the built-in interpolation 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.

License

MIT License © 2023 u3u