A generic user settings modal for React Native

Easily integrate a user preference modal in your React Native applications with MayoSettingsModal, now supporting multiple independent modal instances.

🚀 Installation

npm install mayo-settings
# OR
yarn add mayo-settings

📖 Usage

Wrapping your app with MayoSettingsProvider

First, wrap your application with MayoSettingsProvider. This provides the necessary context for managing multiple MayoSettingsModal instances.

import { MayoSettingsProvider } from 'mayo-settings';

function App() {
  return (
    <MayoSettingsProvider>
      {/* Rest of your app components */}
    </MayoSettingsProvider>
  );
}

Using MayoSettingsModal in your component

Here's how you can use the MayoSettingsModal in your component:

import { MayoSettingsModal, useMayoSettings } from 'mayo-settings';

function SettingsComponent() {
  const { openModal, closeModal } = useMayoSettings();

  return (
    <>
      <Button onPress={() => openModal("settingsModalId")} title="Open Settings" />

      <MayoSettingsModal
        id="settingsModalId"
        onClose={() => closeModal("settingsModalId")}
        onLogout={handleLogout}
        config={{
          headerTitle: 'Custom Settings',
          logoutButtonText: 'Custom Logout',
        }}
      >
        {/* Your custom settings go here */}
      </MayoSettingsModal>
    </>
  );
}

🛠️ Props and Configuration

Here are some of the available props and configuration options you can pass to MayoSettingsModal:

| Prop Name | Type | Description | |-----------|----------|------------------------------------------------------| | id | boolean | A unique identifier for the modal instance. | | onClose | function | Callback function when closing the modal. | | onLogout | function | Callback function when the logout action is triggered.| | config | object | Configuration object for additional modal settings. |

For the config object:

| Property Name | Type | Description | |-------------------|--------|------------------------------------------| | headerTitle | string | Title text for the modal header. | | logoutButtonText | string | Text for the logout action button. | | showFooter | boolean | Shows of not the footer with the logout button |

 🔍 API

MayoSettingsModal

| Prop | Type | Description | |:--------:|:--------:|:--------:| | onLogout | function | Callback to handle logout logic. | | children | ReactNode | Children components for your settings. | | config | object (optional) | Configuration for the modal. |

useMayoSettings

Hook to manage user preferences.

• openModal(id: string): Opens a modal by its unique ID.
• closeModal(id: string): Closes a modal by its unique ID.

📚 License

This project is licensed under the MIT License.