Have ideas to improve npm?Join in the discussion! »

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;

Keywords

none

Install

npm i cf-component-viewport

DownloadsWeekly Downloads

321

Version

2.2.1

License

BSD-3-Clause

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar