https://github.com/loopmode/use-content
A react hook for using local or remote string-based content
https://github.com/loopmode/use-content
Last synced: about 1 year ago
JSON representation
A react hook for using local or remote string-based content
- Host: GitHub
- URL: https://github.com/loopmode/use-content
- Owner: loopmode
- Created: 2019-03-27T15:37:21.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-27T15:37:52.000Z (about 7 years ago)
- Last Synced: 2025-02-08T18:37:06.216Z (about 1 year ago)
- Language: JavaScript
- Size: 77.1 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @loopmode/use-content
A react effect hook for displaying local or remote string-based content.
## Usage
```jsx
import React from 'react';
import useContent from '@loopmode/use-content';
const Content = ({ children, src }) => {
const content = useContent(children, { src });
return (
{content}
);
}
const Demo = () => {
return (
Hello text!
);
}
```
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.
```jsx
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 (
{content}
);
}
const Demo = () => {
return (
);
}
```