react-gracefully
A library for gracefully rendering responsive React client or server side.
Installation
Usage
useGrace
hook
react-gracefully exposes the useGrace
hook to get access to devices, breakpoints and window details.
Devices
Here is an example of how to use the useGrace
hook to access device details.
Breakpoints
Here is an example of how to use the useGrace
hook to access breakpoint details.
Window
Here is an example of how to use the useGrace
hook to access window details.
Components
react-gracefully exposes a number of components. These components can be used to setup the configuration or show or hide content server side.
Show
component
The Show
component can be used to show content for specific breakpoints or devices. Since it uses media queries under the hood all content is returned from the server to the client and then hidden or shown using css. This means it can be used effectively in server side rendered apps such as Next.js.
Hide
component
The Hide
component can be used to hide content for specific breakpoints or devices. Since it uses media queries under the hood all content is returned from the server to the client and then hidden or shown using css. This means it can be used effectively in server side rendered apps such as Next.js.
GraceProvider
component
The GraceProvider
component is used to scope and configure use-gracefully for the app. It allows custom breakpoints and/or devices to be configured.
Express Middleware
Default (UserAgent)
The react-gracefully express middleware by default will use the user-agent
to sniff the current device type.
Custom (Headers)
Optionally, react-gracefully express middleware can be configured to check custom headers for the current device type.