/babel-plugin-react-suspense

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

Primary LanguageJavaScriptMIT LicenseMIT

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

GitHub Workflow Status (branch) Codecov branch npm npm downloads License GitHub contributors (via allcontributors.org)

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

[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
RiN
💻 🤔 📖 🚇 🔧