cf-component-viewport

2.2.1 • Public • Published

cf-component-viewport

Cloudflare Viewport Component

Installation

$ npm install cf-component-viewport

Usage

import React from 'react';
import Viewport from 'cf-component-viewport';
 
const ViewportComponent = () => (
  <div>
    <p>Resize the window</p>
 
    <Viewport size="mobile">
      <p className="cf-viewport--is">size="mobile"</p>
    </Viewport>
    <Viewport not size="mobile">
      <p className="cf-viewport--not">not size="mobile"</p>
    </Viewport>
 
    <Viewport size="mobileWide">
      <p className="cf-viewport--is">size="mobileWide"</p>
    </Viewport>
    <Viewport not size="mobileWide">
      <p className="cf-viewport--not">not size="mobileWide"</p>
    </Viewport>
 
    <Viewport size="tablet">
      <p className="cf-viewport--is">size="tablet"</p>
    </Viewport>
    <Viewport not size="tablet">
      <p className="cf-viewport--not">not size="tablet"</p>
    </Viewport>
 
    <Viewport size="desktop">
      <p className="cf-viewport--is">size="desktop"</p>
    </Viewport>
    <Viewport not size="desktop">
      <p className="cf-viewport--not">not size="desktop"</p>
    </Viewport>
 
    <Viewport size="desktopLarge">
      <p className="cf-viewport--is">size="desktopLarge"</p>
    </Viewport>
    <Viewport not size="desktopLarge">
      <p className="cf-viewport--not">not size="desktopLarge"</p>
    </Viewport>
  </div>
);
 
export default ViewportComponent;

Readme

Keywords

none

Package Sidebar

Install

npm i cf-component-viewport

Weekly Downloads

903

Version

2.2.1

License

BSD-3-Clause

Last publish

Collaborators

  • lerwincf
  • lbarthonet
  • cf-media-manager
  • jacobbednarz
  • celso
  • cf-radar
  • dash_service_account
  • g4brym
  • snigdha34
  • wrangler-publisher
  • marksteyn
  • chiminator
  • sgoodhew_cf
  • terinjokes
  • third774
  • jsteinberger
  • jasnell
  • asapzacy
  • pcostanzo
  • gregbrimble
  • geelen
  • rexscaria
  • dcruz_cf
  • xuranwang
  • jculvey
  • sejoker
  • vasturiano
  • cf-ci-write
  • segments-write
  • thibmeu
  • xortive
  • gurjinder
  • cf-ci2
  • lvalenta
  • worenga