@epilogo/stringifyr NPM

Stringifyr

A polymorphic JS library for integrating with the Stringifyr platform.

ReactJS & ReactNative integration

import * as React from 'react';
import {StringifyrReact} from '@epilogo/stringifyr'

export const Stringifyr = StringifyrReact({
  react: { React },
  apiKey: 'REQUIRED_API_KEY',
  fetchOnLoadWithParams: {
    fileSlug: 'OPTIONAL_FILE_SLUG'
  },
});

The initialization above exposes some hooks to be used in your components.

Let's say we have a Stringifyr file with the following keys and values

{
  "blog.{lang=en}.{id=welcome}.title": "Welcome to my blog",
  "blog.{lang=en}.{id=welcome}.content": "...",
  "blog.{lang=en}.{id=tutorial}.title": "How to use Stringifyr",
  "blog.{lang=en}.{id=tutorial}.content": "..."
}

You can use useNodeValue to get all our blog posts in english

/**
 * Will resolve to 
 * posts = {
 *   welcome: {
 *     title: 'Welcome to my blog',
 *     content: '...',
 *   },
 *   tutorial: {
 *     title: 'How to use Stringifyr',
 *     content: '...',
 *   },
 * }
 */
const posts = Stringifyr.useNodeValue(`blog.{lang=en}.{id}`);

useNodeValue will return an object with keys whenever you provide an unresolved variable like {lang} or {id} and it will resolve the value when you define the variable. eg blog.en

If you provide the full path to a node only the string value will be returned. E.g blog.{lang=en}.{id=tutorial}.title will resolve to How to use Stringifyr.

/**
 * tutorialContent = "How to use Stringifyr"
 */
const tutorialContent = Stringifyr.useNodeValue(`blog.{lang=en}.{id=tutorial}.title`);

Pure HTML / JS integration

You can also include the library in other ways
Checkout the Skypack docs for more info

<!DOCTYPE html>
<html>
<script type="module">
    import Stringifyr from 'https://cdn.skypack.dev/@epilogo/stringifyr';

    new Stringifyr.StringifyrDOM({
        apiKey: "REQUIRED_API_KEY",
        fetchOnLoadWithParams: {
            fileSlug: 'OPTIONAL_FILE_SLUG'
        },
    });
</script>
<body>

<-- "{sfyr=blog.{lang=en}.title}" will be replaced with the related string value -->
<div>{sfyr=blog.{lang=en}.title}</div>

</body>
</html>

stringifyr localization auto-gpt

@types/react dompurify js-cookie lodash marked safe-stable-stringify

@everything-registry/sub-chunk-294

3 years ago

3 years ago

3 years ago

3 years ago