react-stateless-dialog is a powerful React & React Native library that allows developers to effortlessly show important information to users within their apps. With a range of versatile features, including a customizable snackbar, a global progress modal, and a convenient dialog manager, this library simplifies the process of delivering essential messages to your user without the need of managing painful states.

Key Features:

• DialogManager: Effortlessly push dialogs using a simple React hook.
• SnackbarManager: Display eye-catching snackbar to instantly grab user attention. Customize the content and appearance of the snackbar to suit your app’s branding and requirements.
• ProgressManager: Easily manage global progress indicators that inform users about ongoing background tasks or operations. Show progress, loading spinners to provide real-time feedback on the status of actions.

Installation & Setup

This library is under active development, it consists on 3 packages:

• @react-stateless-dialog/core: An abstraction layer that manage state & managers
• @react-stateless-dialog/native: The React Native implementation to use on mobile
• @react-stateless-dialog/web: The React implementation to use on Web (currently not available, under development)

Use on React WEB

IN PROGRESS…

Use on React Native

yarn add @react-stateless-dialog/core @react-stateless-dialog/native

# The library rely on theses packages, you need to install them in your project:
yarn add react-native-reanimated react-native-safe-area-context react-native-gesture-handler

Setup react-native-reanimated:

// Add this to your babel.config.js :
plugins: ['react-native-reanimated/plugin']

Setup the provider:

import React from 'react';
import 'react-native-reanimated';
import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context';
import { extendConfig, StatelessDialogProvider } from '@react-stateless-dialog/core';
import { StatelessDialogConfigNative } from '@react-stateless-dialog/native';

// The config should be immutable and placed outside of the component
const statelessDialogConfig = extendConfig(StatelessDialogConfigNative, {
    // Customize the provider
});

const FLEX: ViewStyle = { flex: 1 };

function App() {
    return (
        // Note: SafeAreaProvider is required to make the library working
        <GestureHandlerRootView style={FLEX}>
	        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
	            <StatelessDialogProvider config={statelessDialogConfig}>
	                {/* App Content */}
	            </StatelessDialogProvider>
	        </SafeAreaProvider>
        </GestureHandlerRootView>
    );
}

Usage

ProgressManager