Add portalInto prop to provider #6; Add github action #2

Author: OlegWock

.github/workflows/release.yml

@@ -0,0 +1,44 @@
+name: 'Build library, upload dist files'
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - master
+    paths:
+      - 'package.json'
+
+jobs:
+  compile:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - id: set_var
+        run: |
+          content=`cat ./package.json`
+          # the following lines are only required for multi line json
+          content="${content//'%'/'%25'}"
+          content="${content//$'\n'/'%0A'}"
+          content="${content//$'\r'/'%0D'}"
+          # end of optional handling for multi line json
+          echo "::set-output name=packageJson::$content"
+      - run: yarn run build
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          tag_name: "v${{fromJson(steps.set_var.outputs.packageJson).version}}"
+          generate_release_notes: true
+          files: |
+            dist/bundle.css
+            dist/bundle.min.css
+            dist/react-local-toast.cjs.development.js
+            dist/react-local-toast.cjs.production.js
+            dist/react-local-toast.esm.development.js
+            dist/react-local-toast.esm.production.js
+            dist/react-local-toast.umd.development.js
+            dist/react-local-toast.umd.production.js

.size-snapshot.json

@@ -1,37 +1,37 @@
 {
   "react-local-toast.cjs.development.js": {
-    "bundled": 19425,
-    "minified": 9713,
-    "gzipped": 2971
+    "bundled": 19556,
+    "minified": 9736,
+    "gzipped": 2987
   },
   "react-local-toast.cjs.production.js": {
-    "bundled": 19425,
-    "minified": 9713,
-    "gzipped": 2971
+    "bundled": 19556,
+    "minified": 9736,
+    "gzipped": 2987
   },
   "react-local-toast.esm.js": {
-    "bundled": 18227,
-    "minified": 8737,
-    "gzipped": 2827,
+    "bundled": 18378,
+    "minified": 8777,
+    "gzipped": 2838,
     "treeshaked": {
       "rollup": {
         "code": 225,
         "import_statements": 225
       },
       "webpack": {
-        "code": 8596
+        "code": 8638
       }
     }
   },
   "react-local-toast.umd.development.js": {
-    "bundled": 108832,
-    "minified": 34254,
-    "gzipped": 11214
+    "bundled": 108975,
+    "minified": 34290,
+    "gzipped": 11231
   },
   "react-local-toast.umd.production.js": {
-    "bundled": 58304,
-    "minified": 21259,
-    "gzipped": 7119
+    "bundled": 58447,
+    "minified": 21295,
+    "gzipped": 7140
   },
   "internals.js": {
     "bundled": 10559,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-local-toast",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Local toast helps you to provide feedback related to particular components on page",
   "main": "dist/index.js",
   "module": "dist/react-local-toast.esm.js",

src/provider.tsx

@@ -10,6 +10,7 @@ export interface LocalToastProviderProps<T> {
     Component?: ToastComponentType<T>;
     animationDuration?: number;
     defaultPlacement?: ToastPlacement;
+    portalInto?: HTMLElement,
 }
 
 export type LocalToastProviderType<T> = (props: LocalToastProviderProps<T>) => JSX.Element;
@@ -25,6 +26,7 @@ export const createProvider = <T,>(
         Component = ToastComponent,
         animationDuration = DEFAULT_ANIMATION_DURATION,
         defaultPlacement = DEFAULT_PLACEMENT,
+        portalInto = document.body,
     }: LocalToastProviderProps<T>) => {
         const [refs, setRefs] = React.useState<LocalToastContextType<T>['refs']>({});
         const [q, setQ] = React.useState<LocalToastContextType<T>['q']>([]);
@@ -122,7 +124,7 @@ export const createProvider = <T,>(
                 }}
             >
                 {children}
-                <Viewport />
+                <Viewport portalInto={portalInto} />
             </Context.Provider>
         );
     };

src/styles.scss

@@ -2,6 +2,8 @@
     pointer-events: none;
     margin-right: 12px;
     font-size: 24px;
+    min-width: 24px;
+    min-height: 24px;
 }
 
 $colors: (
@@ -31,7 +33,7 @@ $colors: (
 
 
 .react-local-toast-text {
-    line-height: 1;
+    line-height: 1.5;
     flex-grow: 1;
 }
 
@@ -44,7 +46,7 @@ $colors: (
     box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
     border-radius: 3px;
     min-width: 150px;
-    max-width: min(300px, calc(80vw - 8px));
+    max-width: min(350px, calc(80vw - 8px));
     min-height: 30px;
     display: flex;
     justify-content: center;

src/viewport.tsx

@@ -17,6 +17,10 @@ interface ToastInfo<T> {
     data: T;
 }
 
+interface ViewportProps {
+    portalInto?: HTMLElement,
+}
+
 // Source: https://stackoverflow.com/questions/19014250/rerender-view-on-browser-resize-with-react
 const useWindowSize = () => {
     const [size, setSize] = React.useState([0, 0]);
@@ -32,7 +36,7 @@ const useWindowSize = () => {
 };
 
 export const createViewport = <T,>(context: Context<LocalToastContextType<T>>) => {
-    return () => {
+    return ({portalInto}: ViewportProps) => {
         const renderToast = (toast: ToastInfo<T>) => {
             const removeMe = () => {
                 setToasts((t) => t.filter((tst) => tst.id !== toast.id));
@@ -125,17 +129,14 @@ export const createViewport = <T,>(context: Context<LocalToastContextType<T>>) =
         };
 
         // Document is unavailable in Next.js SSR, so postpone actual rendering of portal
-        const ref = React.useRef<HTMLElement>();
         const [mounted, setMounted] = React.useState(false);
-
-        // We don't really need window size, but we need to re-render once window size changes
-        const [width, height] = useWindowSize();
-
         React.useEffect(() => {
-            ref.current = document.body;
             setMounted(true);
         }, []);
 
+        // We don't really need window size, but we need to re-render once window size changes
+        const [width, height] = useWindowSize();
+
         const { q, setQ, Component, animationDuration } = React.useContext(context);
         const [toasts, setToasts] = React.useState<ToastInfo<T>[]>([]);
 
@@ -216,11 +217,12 @@ export const createViewport = <T,>(context: Context<LocalToastContextType<T>>) =
         });
 
         if (!mounted) return null;
+
         return ReactDOM.createPortal(
             <>
                 <TransitionGroup component={null}>{toasts.map(renderToast)}</TransitionGroup>
             </>,
-            ref.current!
+            portalInto || document.body
         );
     };
 };