HopperProvider
HopperProvider is the container for all applications using Hopper. It defines the color scheme, locale, and other application level settings. It is also used to dynamically inject CSS variables and body styles to your application.
Props
- locale?
- navigate?
- useHref?
- children
- withBodyStyle?
- colorScheme?
- defaultColorScheme?
- withCssVariables?
- unsupportedMatchMediaBreakpoint?
- style?
- className?
- id?
The The BCP47 language code for the locale.
Set this up once in the root of your app, and any Hopper component with the href prop will automatically navigate using your router. This prop should be set to a function received from your router for performing a client side navigation programmatically.
useHref is an optional prop that converts a router-specific href to a native HTML href, e.g. prepending a base path.
The children of the component
Determines whether the styles should be added to the document's body
By default, it is set to false
. If set to true
, it will apply additional styling to the document's body.
The color scheme to use.
Default color scheme to use when a user preferred color scheme (system) is not available.
Determines whether token CSS variables should be added to the document's head
By default, it is set to true
, you should not change it unless you want to manage CSS variables via .css
files
The breakpoint to use when the browser does not support matchMedia.
Application provider
A HopperProvider must be the root component of your application. All other Hopper components rely on the Provider to define the color scheme, locale, and other settings that they need in order to render. You can nest multiple HopperProviders to create different themes or locales for different parts of your application if needed.
Color scheme
We recommend supporting both light and dark color schemes in your application. If you need to override this with an application specific setting, you can use the colorScheme prop.
See the styling documentation for more information about using Hopper color variables in your application to ensure it adapts to light and dark mode properly.
See the color schemes documentation for more information on how to apply a color scheme to your application.
Locales
Another important setting for your application is the locale. By default, Hopper chooses the locale matching the user's browser/operating system language. This can be overridden with the locale prop if you have an application specific setting. This prop accepts a BCP 47 language code.
Hopper currently supports the following locales: en-US
, en-UK
, fr-CA
, fr-FR
.
To access the current locale anywhere in your application, see the useLocale hook.
Client side routing
The HopperProvider component accepts an optional router prop. This enables Hopper components that render links to perform client side navigation using your application or framework's client side router. See the client side routing guide for details on how to set this up.
Inject body styles
withBodyStyle
determines whether you want Hopper to style the body of your application. By default, it is set to false. You should enable it on the Hopper provider at the root of your application.
withBodyStyle
includes the following body elements styles:
Inject CSS Variables
withCssVariables
determines whether Hopper's CSS variables should be added to your application. By default, it is set to true and should not be changed unless you want to manage CSS variables via a CSS file. Note that in this case, you will need to add the tokens manually, ideally using the @hopper-ui/tokens
package.