https://github.com/tizmagik/react-asynccomponent

Tiny React Async Component Wrapper
https://github.com/tizmagik/react-asynccomponent

hacktoberfest

Last synced: about 1 month ago
JSON representation

Tiny React Async Component Wrapper

• Host: GitHub
• URL: https://github.com/tizmagik/react-asynccomponent
• Owner: tizmagik
• License: mit
• Created: 2021-10-30T03:47:54.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-31T05:02:25.000Z (about 3 years ago)
• Last Synced: 2023-03-24T04:23:25.715Z (over 1 year ago)
• Topics: hacktoberfest
• Language: TypeScript
• Homepage:
• Size: 763 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-asynccomponent

> ⚠️ Still a work in progress. Do not use yet! ⚠️

Asynchronously load large components, but use them in JSX as if they were synchronously available. This component basically wraps dynamic import `import()` with some additional convenience options.

## Usage

```jsx

import React from 'react';

import asyncComponent from 'react-asynccomponent';

const HeavyComponent = asyncComponent(() => import('./HeavyComponent'));

const App = () => (

  <>

    

  >

);

```

## Options

Available options are:

```js

type AsyncComponentOptions = {

  /** Function will be called if there's an error while running the dynamic import */

  onError?: (e: unknown) => void,

  /** Function called upon successfully loading.  */

  onLoaded?: (c: ComponentType) => void,

  /** Component to render if there was an error. */

  ErrorComponent?: ComponentType,

  /** Component to render while loading. */

  Loading?: ComponentType,

};

```

## Current Project Status

This project is still under active development. Roadmap:

- Better TypeScript typings

- Better tests

- Storybook/documentation site

Stay tuned! And if you're interested in helping out, by all means, feel free to create an issue/PR/discussion. Cheers!