Package Exports

@tembell/paresseux
@tembell/paresseux/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tembell/paresseux) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Paresseux: 🐨 Lazy & Synchronous flows for modals interactions in React

Paresseux Logo

Paresseux is a React modal management library designed to streamline the handling of modals in a linear fashion, especially within complex workflows. It provides a convenient way to manage modals and their interactions while keeping your codebase clean and maintainable.

Getting Started

To start using Paresseux in your React application, follow these simple steps:

Installation

Install the library using your favorite package manager:

npm install @tembell/paresseux
# or
yarn add @tembell/paresseux
# or
pnpm add @tembell/paresseux

Wrap Your App

Wrap your application with the <ModalsProvider> to enable the use of the useOpenModal hook:

import { ModalsProvider } from '@tembell/paresseux';

function App() {
  return (
    <ModalsProvider>
      {/* Your app components */}
    </ModalsProvider>
  );
}

Example Usage

Now, you can use the useOpenModal hook to manage your modals in a linear flow. Here's an example:

import { useOpenModal } from '@tembell/paresseux';

export default function YourComponent() {
  const openModal = useOpenModal();

  async function takeAction() {
    type SlothAction = 'sleep' | 'eat' | undefined;
    const slothAction = await openModal<SlothAction>(
      <SlothActionModal />
    );

    // undefined for cancel
    if (!slothAction) return;

    if (slothAction === 'sleep') {
      // Go to sleep ...
      return;
    }

    type Food = 'leaves' | 'fruits' | 'insects' | undefined;
    const foodChoice = await openModal<Food>(
      <FoodModal />
    );

    // undefined for cancel
    if (!foodChoice) return;

    // Eat chosen fruit...
  }

  return (
    <>
      <h1>Hey Slothy, What do you want to do today?</h1>
      <Button onClick={takeAction}>Take Action</Button>
    </>
  );
}

Contributors

Yair - @yairorpo
Ariel Benichou - @ArielBenichou

A special thanks to Yair for the brilliant idea and the initial pieces of code that laid the foundation for Paresseux.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.