https://github.com/pie6k/suspensify

Easy way to convert any async function to suspended function
https://github.com/pie6k/suspensify

async react suspense

Last synced: 3 months ago
JSON representation

Easy way to convert any async function to suspended function

• Host: GitHub
• URL: https://github.com/pie6k/suspensify
• Owner: pie6k
• License: mit
• Created: 2019-09-20T15:44:01.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T10:54:40.000Z (over 2 years ago)
• Last Synced: 2024-10-12T13:14:51.887Z (8 months ago)
• Topics: async, react, suspense
• Language: TypeScript
• Homepage: https://pie6k.github.io/suspensify/
• Size: 623 KB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Suspensify

Easy way to convert any async function to suspended function

```

yarn add suspensify

```

Demo: https://pie6k.github.io/suspensify/

```ts

import React, { Suspense } from 'react';

import { render } from 'react-dom';

import { suspensify } from 'suspensify';

// first - let's say we have some regular, async function

function getHelloWithDelay(name: string, delay: number) {

  // just a promise that returns a string after some delay

  return new Promise((resolve) => {

    setTimeout(() => {

      resolve(`Hello, ${name}`);

    }, delay);

  });

}

// now we convert it to suspended function

const [getSuspendedHello] = suspensify(getHelloWithDelay);

// now we can just use it inside any component like it is sync function

// let's create some simple component

interface DelayedHelloProps {

  delay: number;

  name: string;

}

function DelayedHello({ delay, name }: DelayedHelloProps) {

  const helloString = getSuspendedHello(name, delay);

  return 
{helloString}
;

}


// last step is to create suspense loading fallback

function App() {

  return (

    Loading...}>

      

    

  );

}

// and start the app

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

```