Fix: Test a fix for #7

demo/index.tsx

@@ -17,7 +17,7 @@ import startOfWeek from 'date-fns/start_of_week';
 import humanizeDuration from 'humanize-duration';
 import mapValues from 'lodash/mapValues';
 import 'pepjs';
-import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import React from 'react';
 import CustomProperties from 'react-custom-properties';
 import ReactDOM from 'react-dom';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
@@ -32,6 +32,8 @@ import DeleteIcon from './assets/outline-delete-24px.svg';
 import { Key } from './components/Key/Key';
 import demoClasses from './index.module.scss';
 
+const { Fragment, useEffect, useMemo, useState } = React;
+
 const locales = {
   ja,
   en,

package.json

@@ -1,6 +1,9 @@
 {
   "name": "@remotelock/react-week-scheduler",
   "version": "0.0.0-development",
+  "publishConfig": {
+    "tag": "next"
+  },
   "license": "MIT",
   "description": "",
   "homepage": "https://remotelock.github.io/react-week-scheduler/",

src/components/EventContent.tsx

@@ -1,6 +1,6 @@
 // @ts-ignore
 import VisuallyHidden from '@reach/visually-hidden';
-import React, { useContext } from 'react';
+import React from 'react';
 import { SchedulerContext } from '../context';
 import { ClassNames } from '../types';
 import {
@@ -25,7 +25,7 @@ export const EventContent = React.memo(function EventContent({
   isStart,
   isEnd,
 }: EventContentProps) {
-  const { locale } = useContext(SchedulerContext);
+  const { locale } = React.useContext(SchedulerContext);
   const [start, end] = getFormattedComponentsForDateRange({
     dateRange,
     locale,

src/components/RangeBox.tsx

@@ -1,20 +1,16 @@
 import classcat from 'classcat';
 import invariant from 'invariant';
 import Resizable, { ResizeCallback } from 're-resizable';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React from 'react';
 import Draggable, { DraggableEventHandler } from 'react-draggable';
 import { useMousetrap } from '../hooks/useMousetrap';
 import { CellInfo } from '../types';
 import { DefaultEventRootComponent } from './DefaultEventRootComponent';
 import { EventContent } from './EventContent';
 import { ScheduleProps } from './Schedule';
 
+const { useCallback, useEffect, useMemo, useRef, useState } = React;
+
 export const RangeBox = React.memo(function RangeBox({
   classes,
   grid,

src/components/TimeGridScheduler.tsx

@@ -8,14 +8,7 @@ import startOfDay from 'date-fns/start_of_day';
 import invariant from 'invariant';
 import isEqual from 'lodash/isEqual';
 import times from 'lodash/times';
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { SchedulerContext } from '../context';
 import { useClickAndDrag } from '../hooks/useClickAndDrag';
@@ -40,6 +33,8 @@ import { mergeEvents, mergeRanges } from '../utils/mergeEvents';
 import { Cell } from './Cell';
 import { Schedule, ScheduleProps } from './Schedule';
 
+const { useCallback, useContext, useEffect, useMemo, useRef, useState } = React;
+
 const MINS_IN_DAY = 24 * 60;
 const horizontalPrecision = 1;
 const toDay = (x: number): number => x * horizontalPrecision;

src/context.ts

@@ -1,4 +1,4 @@
 import en from 'date-fns/locale/en';
-import { createContext } from 'react';
+import React from 'react';
 
-export const SchedulerContext = createContext({ locale: en });
+export const SchedulerContext = React.createContext({ locale: en });

src/hooks/useClickAndDrag.ts

@@ -1,17 +1,13 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { fromEvent, merge, Observable, of } from 'rxjs';
-import {
-  delay,
-  filter,
-  map,
-  mergeMap,
-  startWith,
-  takeUntil,
-  tap,
-} from 'rxjs/operators';
+import React from 'react';
+import rxjs, { Observable } from 'rxjs';
+import operators from 'rxjs/operators';
 import { Rect } from '../types';
 import { createPageMapCoordsToContainer } from '../utils/createPageMapCoordsToContainer';
 
+const { useCallback, useEffect, useState } = React;
+const { fromEvent, merge, of } = rxjs;
+const { delay, filter, map, mergeMap, startWith, takeUntil, tap } = operators;
+
 const prevent = tap((e: TouchEvent) => {
   e.preventDefault();
   e.stopPropagation();

src/hooks/useEventListener.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React from 'react';
 
 export function useEventListener<
   K extends keyof HTMLElementEventMap,
@@ -12,7 +12,7 @@ export function useEventListener<
 ) {
   const { current } = ref;
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (current === null) {
       return;
     }

src/hooks/useMousetrap.ts

@@ -1,5 +1,7 @@
 import Mousetrap from 'mousetrap';
-import { useEffect, useRef } from 'react';
+import React from 'react';
+
+const { useEffect, useRef } = React;
 
 /**
  * Use mousetrap hook