react-jizy

React component wrapper for lazy import

Install

yarn add react-jizy
# yarn add react @types/react

Usage

demo is here.

import React from 'react';
import {render} from 'react-dom';
import Jizy from 'react-jizy';

class Loading extends React.Component {
  render() {
    return <div>loading</div>;
  }
}

const jizy = new Jizy<'Foo' | 'Bar'>(Loading);
jizy.add('Foo', async () => {
  const module = await import('./dynamic-foo');
  return module.DynamicFoo;
});
jizy.add('Bar', async () => {
  const module = await import('./dynamic-bar');
  return module.DynamicBar;
});

const div = document.createElement('div');
document.body.appendChild(div);

class View extends React.Component<any, any> {
  state = {
    foo: true
  }

  toggle = () => {
    this.setState({
      foo: !this.state.foo
    });
  }

  render() {
    return (
      <>
        {this.state.foo && <jizy.components.Foo />}
        {!this.state.foo && <jizy.components.Bar />}
        <button onClick={this.toggle}>button</button>
      </>
    );
  }
}

render(<View />, div)