Demo: https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-window-handle--window-handle

Features

• Server side rendering
• light waight

Install

$ npm install handle-window-undefined --save

$ yarn add handle-window-undefined

Usage

Just import the window component from handle-window-undefined

import window from 'handle-window-undefined';
// we can access any function related to window object 
// like window.addEventListener, window.matchMedia, window.location ...etc
    
console.log(window)

-- OR --

Simple DOM Example

Just import the GridCarousel component from handle-window-undefined
and pass your item as childrens

import window from 'handle-window-undefined';
 
window.document.body.innerHTML = '<div class="foo">Hi!</div>';
window.document.body.querySelector('.foo').textContent;

Another Example with react

in this way we can avoid window undefined error while add window.addEventListener

import React,{useEffect} from 'react';
import window from 'handle-window-undefined';

const WindowExample = () => {

  useEffect(()=>{
    window.addEventListener('click', ()=>{})
  })
}

export default WindowExample;

or visit https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-window-handle--window-handle

Universal Testing Pattern

You can use a really simple pattern to enable your browser modules to run in Node.js. Just allow a window object to be passed in to your module and prepend any references to browser globals with win. Set win to the passed in window object if it exists, otherwise fallback to global window.

  import window from 'handle-window-undefined'

  function createTitle(text, win) {
    win = win || (typeof window === 'undefined' ? undefined : window);
  
    const title = win.document.createElement('h1');
    title.innerHTML = text;
    return title;
  };
 
  module.exports = createTitle;

or visit https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-window-handle--window-handle

LICENSE

MIT