https://github.com/r17x/babel-plugin-react-suspense

a way to wrap component with React.Suspense as suspense prop.
https://github.com/r17x/babel-plugin-react-suspense

babel-plugin hacktoberfest hacktoberfest-accepted react react-jsx react-library react-suspense

Last synced: 9 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/r17x/babel-plugin-react-suspense
• Owner: r17x
• License: mit
• Created: 2022-10-14T06:11:53.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-12T06:54:08.000Z (11 months ago)
• Last Synced: 2025-04-30T15:21:49.244Z (9 months ago)
• Topics: babel-plugin, hacktoberfest, hacktoberfest-accepted, react, react-jsx, react-library, react-suspense
• Language: JavaScript
• Homepage:
• Size: 641 KB
• Stars: 10
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          


babel-plugin-react-suspense


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


`} />`

↓ ↓ ↓ ↓ ↓ ↓

`}>

  Features  • 

  Getting Started  • 

  Contributors 



---



[![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/r17x/babel-plugin-react-suspense/release/main)](https://github.com/r17x/babel-plugin-react-suspense/actions/workflows/release.yml?query=branch%3Amain+)

[![Codecov branch](https://img.shields.io/codecov/c/github/r17x/babel-plugin-react-suspense/main)](https://app.codecov.io/gh/r17x/babel-plugin-react-suspense)

[![npm](https://img.shields.io/npm/v/babel-plugin-react-suspense)](https://www.npmjs.com/package/babel-plugin-react-suspense/v/latest)

[![npm downloads](https://img.shields.io/npm/dw/babel-plugin-react-suspense)](https://www.npmjs.com/package/babel-plugin-react-suspense/v/latest)

[![License](https://img.shields.io/github/license/r17x/babel-plugin-react-suspense)](https://github.com/r17x/babel-plugin-react-suspense/blob/main/LICENSE)

[![GitHub contributors (via allcontributors.org)](https://img.shields.io/github/all-contributors/r17x/babel-plugin-react-suspense/main)](https://github.com/r17x/babel-plugin-react-suspense#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\] ↑](#toc)

- [Installation](#installation)

- [Configuration](#configuration)

- [Usage](#usage)

### Installation

[\[Back to the Getting Started\] ↑](#getting-started)

- yarn

  - `yarn add babel-plugin-react-suspense`

- npm

  - `npm -i babel-plugin-react-suspense`

### Configuration

[\[Back to the Getting Started\] ↑](#getting-started)

```diff

// babel configuration

-- plugins: []

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

```

### Usage

[\[Back to the Getting Started\] ↑](#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`).

```javascript

const App = () => (

  <>

    } />

  >

);

```

# Contributors

[\[Back to the Table of Contents\] ↑](#toc)

  

    

      
RiN
💻 🤔 📖 🚇 🔧