diegomura / diegomura/react-pdf
Support React Suspense (Pull request available)
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
First of all this issue's pull request is a continuation of my work as described in issue #899.
Why support concurrent mode? Let me explain my initial use-case:
I want to use jimp to fetch images and transform them to greyscale. Since image buffers are supported I can prepare these buffers outside of the render process and pass these buffers to the root component and use them further on.
But this is a messy solution (imo), and I want to use React hooks for this. This way I can create awesome re-usable components for fetching and altering images. Just like you would for fetching data, etc. (also not supported previously).
I modified the "images" example to showcase this:
examples/images/index.js
```
const doc = () => {
const imageBuffer = useTransformImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Borah_Peak_ID_2-22-15.JPG/1280px-Borah_Peak_ID_2-22-15.JPG',
);
return (
....
```
examples/images/useTransformImage.js
```
const cache = {};
import Jimp from 'jimp';
export default function(url) {
if (cache[url] === undefined) {
throw new Promise(resolve => {
Jimp.read(url).then(image => {
image
.greyscale()
.getBufferAsync('image/jpeg')
.then(buffer => {
cache[url] = buffer;
resolve();
});
});
});
}
return cache[url];
}
```
This should also enable integration with future concurrent data fetching libraries (such as URQL), etc.
I will explain the implementation details in the pull request.
Contributor guide
Assessment
This issue has not been assessed yet.