diegomura / diegomura/react-pdf

Support React Suspense (Pull request available)

Open
#905 1 comment 2 reactions 0 assignees View on GitHub
new feature
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.