Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PDFViewer breaks react useContext #743

Closed
CzBuCHi opened this issue Oct 25, 2019 · 4 comments
Closed

PDFViewer breaks react useContext #743

CzBuCHi opened this issue Oct 25, 2019 · 4 comments

Comments

@CzBuCHi
Copy link

CzBuCHi commented Oct 25, 2019

Describe the bug
PDFViewer component prevents passing context using react hooks.

To Reproduce

interface DataContext {
    data: { nested: string; } | null;
}
const defaultValue: DataContext = { data: null };
const DataContext = React.createContext(defaultValue);

// real context loaded via ajax 
const getDataContextValue = () => ({ data: { nested: "value" }});

// app root
const App: React.FC = ({ children }) => {
    return (
        <DataContext.Provider value={getDataContextValue()}>
             {children}
       </DataContext.Provider>
   );
};

// test pdf doc, that uses react hook context
const MyPdf: React.FC = () => {
    const { data: { nested } } = React.useContext(DataContext);

    return (
        <Document>
            <Page>
                <Text>{nested}</Text>
            </Page>
        </Document>
    );
};

// this will throw error during deconstructing because datacontext will have default value 
// and not value from App DataContext.Provider
const ThrowsError: React.FC = () => {
    return (
        <PDFViewer>
            <MyPdf />
        </PDFViewer>
    );
};

// this will render successfully 
const Workaroud: React.FC = () => {
    return (
        <DataContext.Consumer>
            {dataContext => (
                <PDFViewer>
                    <DataContext.Provider value={dataContext}>
                        <MyPdf />
                    </DataContext.Provider>
                </PDFViewer>
            )}
        </DataContext.Consumer>
    );
};

// render
ReactDOM.render(
    <App>
        <ThrowsError />
        <Workaroud />
    </App>
, root);

Expected behavior
PDFViewer should pass context into document without needs for manually pass context as in Workaroud component above.

Desktop:

  • OS: windows 10
  • Browser chrome
  • React-pdf version 1.6.7
@fabienheureux
Copy link

I have some related issues with context as well, this may be related: #522

@diegomura
Copy link
Owner

Yes. I'm aware of this and I could fix it for v2.0 that hopefully will be ready soon. Closing this in favor of #522

@karljansson91
Copy link

This seem to still be broken in versio 2.0

@Karunika
Copy link

Any fixes?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants