Skip to content

Expose load status of the Document as a className on react-pdf__Document wrapper #2057

@islami00

Description

@islami00

Before you start - checklist

  • I understand that React-PDF does not aim to be a fully-fledged PDF viewer and is only a tool to make one
  • I have checked if this feature request is not already reported

Description

I would like to make the Document component take the full width/height of the screen when it is not loaded (i.e in error/loading/no-data state) so I can center my custom message in it's container.

Proposed solution

Add a className to the Document's wrapper for each of its states like the Message component has.

Alternatives

  1. Tracking the pending/error/success state externally and using that to add the className. This has a delay because onLoadProgress is called asynchronously, causing a flash of unstyled content on subsequent loads.
  2. Using :has selector to check if react-pdf__message is a child of the Document. This works, but requires using modern browser features that may not be compatible with older devices.

Additional information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions