@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiViewport

Package: @uireact/tools

^v0.1.2

‼️ Beta

Component used to render content in specific breakpoints.

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/tools

Usage

Simply wrap any React component in the <UiViewport /> component and it will render whenever the criteria prop is matched.


<>
  <UiViewportExample />
</>

Code:

import React from 'react';
import { UiViewport } from "@uireact/tools";

export const UiViewportExample = () => {
  return (
    <>
      <UiViewport criteria='small'>
        <p>I render in small</p>
      </UiViewport>
      <UiViewport criteria='s|m'>
        <p>I render in small AND medium</p>
      </UiViewport>
      <UiViewport criteria='medium'>
        <p>I render in medium</p>
      </UiViewport>
      <UiViewport criteria='m|l'>
        <p>I render in medium AND large AND xlarge</p>
      </UiViewport>
      <UiViewport criteria='large'>
        <p>I render in large AND xlarge</p>
      </UiViewport>
      <UiViewport criteria='xlarge'>
        <p>I render in xlarge</p>
      </UiViewport>
    </>
  )
};

Criteria prop

These are the valid values for the criteria prop:

  's|m' | // Small AND Medium
  'm|l' | // Medium AND Large
  'small' | // ONLY small
  'medium' | // Only medium
  'large' | // Large AND XLarge
  'xlarge' // Only XLarge

Large and XLarge

When you use the large criteria that content will render in Large and XLarge breakpoints. The XLarge criteria is intended to be used when you you want to render extra content for wide screens, but being in a XLarge screen won't remove the content with criteria Large, as large will always be true on screens larger than medium breakpoint.

Customize viewport values

These are the default values we use as the breakpoints size limit:

{
  small: 580,
  medium: 990,
  large: 1440
}

The values are in pixels.

If you want to customize this values in your app, you can set up your own values using the UiViewportProvider.

  import { UiViewportProvider } from '@uireact/tools';

  export const AppWrapper = () => {
    return (
      <UiViewportProvider data={{ small: 700, medium: 1000, large: 1800 }}>
        <p>Your react app</p>
      </UiViewportProvider>
    )
  }