feat!: add custom options

README.md

@@ -20,16 +20,10 @@ npm i use-confirm
 
 ## Usage
 
-`use-confirm` exports several things:
-
-- `useConfirm` - React hook;
-- `ConfirmContextProvider` - React context provider;
-- `withConfirm` - HOC for using instead of `ConfirmContextProvider`;
+package exports only one thing - `createConfirm`
 
 ### A small preview
 
-[![Edit use-confirm-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-confirm-example-rvs5zs?fontsize=14&hidenavigation=1&theme=dark)
-
 ```tsx
 const Component = () => {
   const { ask } = useConfirm();
@@ -47,138 +41,81 @@ const Component = () => {
 };
 ```
 
-### Example
-
-Code for that example you can find on [codesandbox](https://codesandbox.io/s/use-confirm-example-rvs5zs)
+1. Creating your own provider and hook
 
-#### App.tsx
+First of all, create new .ts file and import `use-confirm` package.
 
-First of all, you need to wrap your application (or a part of it) inside `ConfirmContextProvider`.
+You need to paste this code in that new file.
 
 ```tsx
-import { ConfirmContextProvider } from "use-confirm";
+// src/lib/useConfirm.ts
+import { createConfirm } from "use-confirm";
 
-export default function App() {
-  return (
-    <ConfirmContextProvider>
-      <YourApp />
-    </ConfirmContextProvider>
-  );
-}
+export const { ConfirmContextProvider, useConfirm } = createConfirm();
 ```
 
-After that, you need to create a confirm modal component. Or don't and just throw it somewhere in application.
-
-You can use whatever component you want. I use here my own [modal.jsx](https://npmjs.com/package/modal.jsx) component.
-
-#### Dialog.tsx
+2. Create confirm dialog
 
 ```tsx
-import { Modal } from "modal.jsx";
-import { useConfirm } from "use-confirm";
+// src/components/ConfirmDialog.tsx
+import { Modal } from "some-modal"; // really any modal, doesn't matter
+import { useConfirm } from "@/lib/useConfirm";
 
-export const Dialog = () => {
-  const { message, isAsking, buttonsText, confirm, deny } = useConfirm();
+export const ConfirmDialog = () => {
+  const { isAsking, message, options, deny, confirm } = useConfirm();
 
   return (
-    <Modal isOpen={isAsking} onClickOutside={deny}>
-      <h2>{message}</h2>
+    <Modal isOpen={isAsking} onClose={deny}>
+      <div>{message}</div>
       <div>
-        <button onClick={deny}>{buttonsText.no}</button>
-        <button onClick={confirm}>{buttonsText.yes}</button>
+        <button onClick={deny}>deny</button>
+        <button onClick={confirm}>confirm</button>
       </div>
     </Modal>
   );
 };
 ```
 
-After that, you are ready to use `useConfirm` hook.
-
-#### Update App.tsx
+3. Add `ConfirmContextProvider` at the top level of your application and confirm dialog from previous step
 
 ```tsx
-import { useState } from "react";
-import { useConfirm, ConfirmContextProvider } from "use-confirm";
-import { Dialog } from "./Dialog";
-
-const YourApp = () => {
-  const { ask } = useConfirm();
-  const [isAgreed, setIsAgreed] = useState(false);
-
-  // NOTE: make sure this function is async
-  const handleDangerousAction = async () => {
-    const ok = await ask("are sure about that?");
-
-    // ask function also takes optional second argument for options
-    // Example:
-    // ask("are sure?", { yesText: "Absolutely", noText: "nope" })
-
-    if (ok) {
-      setIsAgreed(true);
-    } else {
-      setIsAgreed(false);
-    }
-  };
-
-  return (
-    <div>
-      <button onClick={handleDangerousAction}>do a dangerous action</button>
-      <p>You {isAgreed ? "agreed" : "didn't agreed"}</p>
+import { ConfirmDialog } from "@/components/ConfirmDialog";
+import { ConfirmContextProvider } from "@/lib/useConfirm";
 
-      <Dialog />
-    </div>
-  );
-};
-
-export default function App() {
+function App() {
   return (
     <ConfirmContextProvider>
-      <YourApp />
+      <ConfirmDialog />
+      <Component />
     </ConfirmContextProvider>
   );
 }
+
+export default App;
 ```
 
-### use withConfirm HOC
+4. Use `useConfirm` hook anywhere in your application
 
-Alternatively, you can use `withConfirm` HOC instead of wrapping your App with `ConfirmContextProvider` component.
+```tsx
+import { useConfirm } from "@/lib/useConfirm";
 
-#### App.tsx
+const Component = () => {
+  const { ask } = useConfirm();
 
-```tsx
-import { withConfirm } from "use-confirm";
+  const handleAction = async () => {
+    const ok = await ask("wanna continue?");
+    if (!ok) return;
 
-const App = () => {
-  // you can easily use `useConfirm` functionaly here
+    alert("Let's go!");
+  };
 
   return (
     <div>
-      <h2>hello useConfirm</h2>
+      <h1>hi mom</h1>
+      <button onClick={handleAction}>do the action</button>
     </div>
   );
 };
-
-// all because of that line
-export default withConfirm(App);
-```
-
-## API
-
-### ConfirmContextProvider
-
-You can change default buttons text. For that, you need to provide prop called `buttonsText` in `ConfirmContextProvider` with next signature.
-
-```typescript
-type ButtonsText = {
-  yes: "fuck yeah";
-  no: "bruh";
-};
-```
-
-If you use `withConfirm` HOC, you can add optional second argument like below.
-
-```typescript
-function withConfirm(App, { buttonsText: { yes: "fuck yeah", no: "nope" } });
 ```
 
 #### Building

src/ConfirmContext.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+
+export type ConfirmContextType<TOptions = {}> = {
+  message: React.ReactNode | null;
+  resolve?: (value: boolean) => void;
+  options?: TOptions;
+  setOptions?: React.Dispatch<React.SetStateAction<TOptions>>;
+  setMessage?: React.Dispatch<React.SetStateAction<React.ReactNode | null>>;
+  setResolve?: React.Dispatch<React.SetStateAction<(value: boolean) => void>>;
+};
+
+export function createConfirmContext<TOptions = {}>() {
+  return React.createContext<ConfirmContextType<TOptions> | null>(null);
+}
+
+export function createConfirmContextProvider<TOptions = {}>(
+  ConfirmContext: React.Context<ConfirmContextType<TOptions>>,
+  options: TOptions
+) {
+  return ({ children }: { children?: React.ReactNode }) => (
+    <ConfirmContextProvider ConfirmContext={ConfirmContext} options={options}>
+      {children}
+    </ConfirmContextProvider>
+  );
+}
+
+export type ConfirmContextProviderProps<TOptions = {}> = {
+  ConfirmContext: React.Context<ConfirmContextType<TOptions>>;
+  options?: TOptions;
+  children?: React.ReactNode;
+};
+
+function ConfirmContextProvider<TOptions = {}>({
+  ConfirmContext,
+  options: _options,
+  children,
+}: ConfirmContextProviderProps<TOptions>) {
+  const [message, setMessage] = useState<React.ReactNode | null>(null);
+  const [options, setOptions] = useState<TOptions>(_options);
+  const [resolve, setResolve] = useState<((value: boolean) => void) | null>(
+    null
+  );
+
+  return (
+    <ConfirmContext.Provider
+      value={{
+        message,
+        setMessage,
+        options,
+        setOptions,
+        resolve,
+        setResolve,
+      }}
+    >
+      {children}
+    </ConfirmContext.Provider>
+  );
+}

src/factory.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import {
+  ConfirmContextType,
+  createConfirmContextProvider,
+} from "./ConfirmContext";
+import { createUseConfirm } from "./useConfirm";
+
+export function createConfirm<TOptions = {}>(options?: TOptions) {
+  const ConfirmContext =
+    React.createContext<ConfirmContextType<TOptions> | null>(null);
+
+  const useConfirm = createUseConfirm<TOptions>(ConfirmContext);
+
+  const ConfirmContextProvider = createConfirmContextProvider<TOptions>(
+    ConfirmContext,
+    options
+  );
+
+  return {
+    useConfirm,
+    ConfirmContextProvider,
+  };
+}

src/index.ts

@@ -1,2 +1 @@
-export * from "./useConfirm";
-export * from "./context";
+export { createConfirm } from "./factory";