@loopmode/use-content

A react effect hook for displaying local or remote string-based content.

Usage

import React from 'react';
import useContent from '@loopmode/use-content';

const Content = ({ children, src }) => {
    const content = useContent(children, { src });
    return (
        <div>{content}</div>
    );
}

const Demo = () => {
    return (
        <div>
            <Content>Hello text!</Content>
            <Content src="https://raw.githubusercontent.com/git/git/master/README.md" />
        </div>
    );
}

If a src is provided, the content is loaded from that URL. The default setup uses window.fetch for loading and aborts pending requests when the component gets unmounted.

If a redact function is provided, it is invoked with the current content and its return value becomes the new value.

If an append or prepend value is provided, it will be resolved to a string value.

import React from 'react';
import useContent from '@loopmode/use-content';


const addSrc = ({ src }) => `// src: ${src}`;
const addMeta = props => `/*\n${JSON.stringify(props, replacer, 4)}\n*/`;

const Content = ({ children, src }) => {
    const content = useContent(children, {
        src,
        prepend: [addSrc, `// Copyright foo`, props => !!props.content && 'Loading...'],
        append: addMeta
    });
    return (
        <div>{content}</div>
    );
}
const Demo = () => {
    return (
        <Content src="https://raw.githubusercontent.com/git/git/master/README.md" />
    );
}

window.fetch and custom loader

We use window.fetch() for loading by default. If you need to support older browsers, you can either provide a fetch polyfill or a custom loader function.

A custom loader function is pretty easy to create:

const loader = (url, callback) => {
    axios.get(url)
        .then(response => callback(response.data));
}

• The signature is (url: String, callback: Function): Function
• Invoke the callback with the result string once you have it
• Optionally return a function

The loader may return a function to cancel pending requests when the requesting component gets unmounted. For example, using axios, it would be something like this:

const loader = (url, callback) => {
    const {token: cancelToken, cancel} = axios.CancelToken.source();
    axios.get(url, {cancelToken})
        .then(response => callback(response.data));
    return cancel
}