https://github.com/martynaskadisa/react-lazy-import

https://github.com/martynaskadisa/react-lazy-import

code-splitting lazy-loading react typescript webpack

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/martynaskadisa/react-lazy-import
• Owner: martynaskadisa
• License: mit
• Created: 2017-06-15T18:05:13.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T20:16:38.000Z (about 2 years ago)
• Last Synced: 2024-04-13T23:55:22.624Z (9 months ago)
• Topics: code-splitting, lazy-loading, react, typescript, webpack
• Language: TypeScript
• Size: 131 KB
• Stars: 13
• Watchers: 2
• Forks: 3
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-lazy-import

## DEPRECATED: Please use `React.lazy` or `@loadable/component` which is a recommended solution by React team

A simple higher order component for easy code splitting.

## Features

* Supports `import()`

* Supports react-router v4

* Ability to add ``

* Ability to Add ``

## Quick example

```jsx

import createLazyContainer from 'react-lazy-import';

const MyComponent = createLazyContainer(() => import('./MyComponent'));

const App = () => {

  return (

    


      My lazy component:

      

    

  );

}

```


## Complete example

```jsx

// Greeter.jsx

import React from 'react';

const Greeter = ({ name }) => (

  
Hello {name}, I am lazy loaded

);


export default Greeter;

```

```jsx

// App.jsx

import React from 'react';

import { render } from 'react-dom';

import createLazyContainer from 'react-lazy-import';

const Loading = () => 
Loading...
;

const Error = () => 
Error!
;


const Greeter = createLazyContainer(() => import('./Greeter'), Loading, Error);

const App = () => {

  return (

    


      My lazy component:

      

    

  );

}


render(, document.getElementById('app'));

```

### Usage with react-router

```jsx

import { Route, Switch } from 'react-router-dom';

const Loading: React.SFC<{}> = () => 
Loading...
;

const Error: React.SFC<{}> = () => 
Error!
;


const Home = createLazyContainer(() => import('./Home'), Loading, Error);

const About = createLazyContainer(() => import('./About'), Loading, Error);

const Contact = createLazyContainer(() => import('./Contact'), Loading, Error);

const NotFound = createLazyContainer(() => import('./NotFound'), Loading, Error);

class App extends React.Component {

  render () {

    return (

      

        

        

        

        

      

    );

  }

}

```

## API

### `createLazyContainer(loader, [loadingComponent], [errorComponent])`

* `loader: () => Promise`

  Function returning promise which returns a React component.

* `loadingComponent` (optional)

  React component which is rendered while your component is loading.

* `errorComponent` (optional)

  React component which is rendered when loader fails to load your component