Package Exports

hydrate-text

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hydrate-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hydrate-text

Tiny library for dynamic text hydrating with variables

Example

import { hydrateText } from 'hydrate-text';

const text1 = 'Hello, {username}!';
const text2 = 'I have to {0} and {1}.';
const route = '/users/:userId';

// 'Hello, John Doe!'
console.log(hydrateText(text1, { username: 'John Doe' }));

// 'I have to run tests and make tea.'
console.log(hydrateText(text2, ['run tests', 'make tea']));

// '/users/1'
console.log(hydrateText(route, { userId: 1 }, { start: ':' }));

Initial variables syntax can be configured via configureHydrateText, that returns hydrateText function as a result.

import { configureHydrateText } from 'hydrate-text';

const route = '/users/:userId';
const routeWithDifferentBorders = '/users/(userId)';

const replaceRouteVariables = configureHydrateText({ start: ':' });

// '/users/1'
replaceRouteVariables(route, { userId: 1 });

// '/users/1'
replaceRouteVariables(
  routeWithDifferentBorders,
  { userId: 1 },
  {
    start: '(',
    end: ')',
  },
);

Features

Light-weight
Dependency-free
Tree-shakable
Works with variables as an object and an array
Flexible variable syntax change
ES Module, CommonJS and UMD options are available
Strongly typed with TypeScript

Installation

npm

npm install hydrate-text

Yarn

yarn add hydrate-text

CDN

Compression option	Links

<script src="link-to-library.js"></script>
<script>
  const { hydrateText: ht } = HydrateText;

  // 'Hello, John Doe!'
  console.log(ht('Hello, {username}!', { username: 'John Doe' }));
</script>