babel-plugin-react-suspense

babel-plugin-react-suspense

a way to wrap component with React.Suspense as suspense prop.

<Component suspense={<Fallback />} />

↓ ↓ ↓ ↓ ↓ ↓

<React.Suspense fallback={<Fallback />}><Component /></React.Suspense

Features • Getting Started • Contributors

Features

• 🤖 Smart enough to import and use Suspense based on user source.
• 🌟 Simply to adopt (just add new attributes or props in your element with suspense as key and value as fallback.

Getting Started

[Back to the Table of Contents] ↑

• Installation
• Configuration
• Usage

Installation

[Back to the Getting Started] ↑

• yarn
  • yarn add babel-plugin-react-suspense
• npm
  • npm -i babel-plugin-react-suspense

Configuration

[Back to the Getting Started] ↑

// babel configuration
-- plugins: []
++ plugins: ["babel-plugin-react-suspense"]

Usage

[Back to the Getting Started] ↑

This babel plugin will enable special prop name (attributes jsx) called suspense every JSXElement declaration. (seem like css prop, if you familiar with styled-component or emotion).

const App = () => (
  <>
    <User suspense={<Fallback />} />
  </>
);

Contributors

[Back to the Table of Contents] ↑

RiN 💻 🤔 📖 🚇 🔧