jaysoo

import React from 'react';
import { useViewportSize } from '@use-viewport-size/use-viewport-size';
import './app.css';
 
export const App = () => {
  const size = useViewportSize();
  return (
    <div className="app">
      {size.width}px / {size.height}px
    </div>

jaysoo

describe('demo', () => {
  beforeEach(() => {
    cy.viewport(1024, 768);
    cy.visit('/');
  });
 
  it('should display viewport dimensions', () => {
    cy.get('.app').contains('1024px / 768px');
  });
});

jaysoo

body {
  margin: 0;
}
 
.app {
  font-family: sans-serif;
  font-size: 10vh;
  height: 100vh;
  display: flex;
  align-items: center;

jaysoo

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from '@testing-library/react';
import { useViewportSize } from './use-viewport-size';
 
describe(' UseViewportSize', () => {
  it('should render successfully', () => {
    // Setup
    let container = document.createElement('div');
    document.body.appendChild(container);

jaysoo

import { useState, useEffect } from 'react';
 
export function useViewportSize() {
  const getSize = () => {
    return { width: window.innerWidth, height: window.innerHeight };
  };
 
  const [size, setSize] = useState(getSize);
 
  useEffect(() => {

jaysoo

{
  // ...
  "build": {
    "builder": "@nrwl/web:build",
    "options": {
      "differentialLoading": false,
      "outputPath": "dist/apps/demo",
      "index": "apps/demo/src/index.html",
      "main": "apps/demo/src/main.tsx",
      "polyfills": "apps/demo/src/polyfills.ts",

jaysoo

const getConfig = require('@nrwl/react/plugins/babel');
const cssModuleRegex = /\.module\.css$/;

module.exports = (config) => {
  config = getConfig(config);
  
  config.module.rules.forEach((rule, idx) => {
    // Find rule tests for CSS.
    // Then make sure it excludes .module.css files.
    if (rule.test.test('foo.css')) {

jaysoo

// libs/gifs/src/lib/gifs.tsx
export const Gifs = (props: GifsProps) => {
  // ...
  const getFetchUrl = useCallback(
    () =>
      // Return `null` if query is empty
      query
        ? `https://api.giphy.com/v1/gifs/search?api_key=${
            props.apiKey
          }&q=${query}`

jaysoo

{
  // ...
  "projects": {
    "my-app": {
      "implicitDependencies": ["api"],
      "tags": []
    },
    // ...
 }

jaysoo

// tools/schematics/react-component/index.ts
import {
  apply,
  chain,
  mergeWith,
  move,
  template,
  url,
  Tree,
  Rule