Forem: Developer Ruhul

React-Loadable in React HOOKS

Developer Ruhul — Sun, 16 Dec 2018 06:16:41 +0000

What if react-loadable was written in hooks(new featuer in react 16.7)'?

Here's a HOC written in hooks to load reactjs component asynchronously

import React, { useEffect, useState } from "react";
import nprogress from "nprogress";
import "nprogress/nprogress.css";

export default (loader, loading) => props => {
  const [loadedComponent, setComponent] = useState(null);

  // this works like componentwillMount
  if (!nprogress.isStarted()) nprogress.start();

  if (loadedComponent) nprogress.done();

  useEffect(() => {
    let mounted = true;

    mounted &&
      loader().then(
        ({ default: C }) => mounted && setComponent(<C {...props} />)
      );

    // componentUnMount
    return () => (mounted = false);
  }, []);

  // return the loaded component
  const Component = loadedComponent || loading || <div>loading..</div>;
  return Component;
};

How to make react router replace component only after the matched route asynchronously loaded..?

Developer Ruhul — Sun, 16 Dec 2018 05:32:50 +0000

So here's the situation - When a Link is clicked the nprogress bar will start and I want react-router to only replace the current component with the matched route once that's done loading asynchronously.. just like in instagram..

But I am only getting this -

I didn't find a solution to this anywhere on the internet.. so I am asking this question here in dev. I am hoping someone here can solve this.

Amazing new webAPI - PictureInPicture

Developer Ruhul — Sat, 24 Nov 2018 02:55:53 +0000

This is an example of the new PIP webAPI.. Open the webpage, click on the toggle pnp mode button.. and see the magic.

Open webpage
Source