Foundation
Main View
Components
Charts
Dialogs
Framer Animations
Forms
Grids
Typography
Tools
UiViewport
Package: @uireact/foundation
This component make it easy to render/remove components from the DOM based on the breakpoint.
1. Make sure you install peer dependencies first:
2. Install package:
npm i -S @uireact/foundation
Deprecated
This component has been deprecated and will be removed in the next major version. Migrate over to the one exported from @uireact/tools
Specific breakpoint
<> <UiViewport criteria={Breakpoints.XLARGE}> <UiCard category="primary">Hey, I'm in XLarge!</UiCard> </UiViewport> <UiViewport criteria={Breakpoints.LARGE}> <UiCard category="primary">Hey, I'm in Large!</UiCard> </UiViewport> <UiViewport criteria={Breakpoints.MEDIUM}> <UiCard category="primary">I appear in Medium!!</UiCard> </UiViewport> <UiViewport criteria={Breakpoints.SMALL}> <UiCard category="primary">And I'm in Small!</UiCard> </UiViewport> </>
The Breakpoints enum is used to set up one specific breakpoint where we want the UiViewport to render something.
Multiple breakpoints
<UiViewport criteria="m|l|xl"> <UiCard category="primary">Hey, I appear in medium, large and xlarge!!</UiCard> </UiViewport>
Multiple breakpoints are supported as prop for the UiViewport when used the string criteria. The whole set of combinations is defined in the BreakpointsString type.
For specific information about the breakpoints definitions you can look at this doc page