{"id":25234618,"url":"https://github.com/arthurclemens/dialogic","last_synced_at":"2025-04-09T10:05:24.856Z","repository":{"id":37927102,"uuid":"200432366","full_name":"ArthurClemens/dialogic","owner":"ArthurClemens","description":"Dialogic: manage dialogs and notifications","archived":false,"fork":false,"pushed_at":"2025-04-01T12:30:19.000Z","size":33416,"stargazers_count":55,"open_issues_count":11,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-07T01:43:34.246Z","etag":null,"topics":["dialogs","javascript","mithriljs","notifications","reactjs","svelte","typescript"],"latest_commit_sha":null,"homepage":"https://arthurclemens.github.io/dialogic/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArthurClemens.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-04T00:12:48.000Z","updated_at":"2024-11-30T15:05:32.000Z","dependencies_parsed_at":"2023-09-25T01:32:50.988Z","dependency_job_id":"6052b861-f09f-4961-b69f-555ce2831334","html_url":"https://github.com/ArthurClemens/dialogic","commit_stats":{"total_commits":801,"total_committers":4,"mean_commits":200.25,"dds":0.5243445692883895,"last_synced_commit":"ff3b1e0545d38cedd5ea67c13a82ceee907c8ee3"},"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurClemens%2Fdialogic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurClemens%2Fdialogic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurClemens%2Fdialogic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurClemens%2Fdialogic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArthurClemens","download_url":"https://codeload.github.com/ArthurClemens/dialogic/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018060,"owners_count":21034048,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dialogs","javascript","mithriljs","notifications","reactjs","svelte","typescript"],"created_at":"2025-02-11T14:00:10.962Z","updated_at":"2025-04-09T10:05:24.830Z","avatar_url":"https://github.com/ArthurClemens.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dialogic: manage dialogs and notifications\n\n- [Supported JavaScript libraries](#supported-javascript-libraries)\n- [Features](#features)\n- [Demo](#demo)\n- [Usage](#usage)\n- [API](#api)\n  - [Dialog and Notification component](#dialog-and-notification-component)\n    - [Options](#options)\n  - [`show`](#show)\n  - [`hide`](#hide)\n  - [`dialogic` options](#dialogic-options)\n    - [`component`](#component)\n    - [`className`](#classname)\n    - [`styles`](#styles)\n    - [`timeout`](#timeout)\n    - [`queued`](#queued)\n    - [`toggle`](#toggle)\n    - [`willShow`](#willshow)\n    - [`didShow`](#didshow)\n    - [`willHide`](#willhide)\n    - [`didHide`](#didhide)\n    - [Component options](#component-options)\n  - [`hideAll`](#hideall)\n  - [`resetAll`](#resetall)\n  - [Handling multiple items with identity options](#handling-multiple-items-with-identity-options)\n    - [Simultaneous, at the same location](#simultaneous-at-the-same-location)\n    - [Simultaneous, at different locations](#simultaneous-at-different-locations)\n    - [Sequence of items](#sequence-of-items)\n  - [`exists`](#exists)\n  - [`getCount`](#getcount)\n  - [Timer functions](#timer-functions)\n    - [`pause`](#pause)\n    - [`resume`](#resume)\n    - [`isPaused`](#ispaused)\n    - [`getRemaining`](#getremaining)\n    - [`useRemaining`](#useremaining)\n  - [Automatically responding to a variable state, such as a route](#automatically-responding-to-a-variable-state-such-as-a-route)\n  - [`useDialog`](#usedialog)\n    - [Options](#options-1)\n    - [Calling show and hide directly](#calling-show-and-hide-directly)\n- [Shout out](#shout-out)\n- [License](#license)\n\n## Supported JavaScript libraries\n\n* React and NextJS - [Dialogic for React documentation](./packages/dialogic-react/README.md)\n* Mithril - [Dialogic for Mithril documentation](./packages/dialogic-mithril/README.md)\n* Svelte and SvelteKit - [Dialogic for Svelte documentation](./packages/dialogic-svelte/README.md)\n\nFor a more basic solution in vanilla JS, check out [dialogic-js](https://github.com/ArthurClemens/dialogic-js).\n\n\n## Features\n\n_item: a dialog/modal or a notification_\n\n* Manage multiple items\n  * Manage simultaneous (stacked) items\n  * Manage a queue of items to show sequentially\n* Optional automatic mode\n  * Show and hide when matching a condition such as a route\n* Transitions\n  * Show and hide an item with specific transition options (or use CSS)\n  * Handle separate spawn locations (for example for different types of notifications)\n  * Replace an already displayed item\n  * Hide all items, or only ones matching a specific id or spawn\n  * Remove all items, or only ones matching a specific id or spawn\n* Timer\n  * Automatic timeout to hide items after a given time\n  * Pause, resume and stop a timer\n* State\n  * Get the number of displayed items (all, per id or per spawn)\n  * Get the paused state of a displayed item using a timer\n  * Get the remaining time of a displayed item using a timer\n  * Use a callback function when an item is shown or hidden\n  * Use the returned Promise when an item is shown or hidden\n* Styling \n  * Use custom CSS classes or style options\n  * Manage timings with CSS (or use transition options)\n  * Use any UI library\n* Written in TypeScript \n\nDialogic does __not__ provide any styling for dialogs or notifications. This gives you the freedom to plug into your own codebase or use any other UI library.\n\n\n## Demo\n\n[Demo page](https://arthurclemens.github.io/dialogic/)\n\n\n## Usage\n\nTo create a dialog or notification, you need:\n\n* Functions `show` and `hide`\n* A Dialog / Notification component\n\nThe usage of the component varies somewhat per JS library - see library specific notes:\n\n* [Dialogic for React](./packages/dialogic-react/README.md)\n* [Dialogic for Mithril](./packages/dialogic-mithril/README.md)\n* [Dialogic for Svelte and SvelteKit](./packages/dialogic-svelte/README.md)\n\n\n\n## API\n\n### Dialog and Notification component\n\nLocation where the dialog or notification (after this: \"item\") will be drawn.\n\nWith Mithril:\n\n```javascript\nm(Dialog)\nm(Dialog, { spawn: \"settings\" })\n```\n\nWith React:\n\n```tsx\n\u003cDialog /\u003e\n\u003cDialog spawn=\"settings\" /\u003e\n```\n\nWith Svelte:\n\n```tsx\n\u003cDialog /\u003e\n\u003cDialog spawn=\"settings\" /\u003e\n```\n\n#### Options\n\n| **Name** | **Type** | **Required** | **Description**                                                                                                                                                   | **Default value** |\n|----------|----------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------|\n| `spawn`  | `string` | No           | Spawn identifier, useful when using multiple spawn locations. See [Handling multiple items with identity options](#handling-multiple-items-with-identity-options) | \"default_spawn\"   |\n\n\n### `show`\n\nShows an item.\n\n```javascript\ndialog.show({\n  dialogic: {\n    component: DialogView,\n    className: \"dialog\",\n  },\n  title: \"Dialog Title\"\n})\n```\n\n* When `queued` is `true` (which is the default for notifications), any further call to `show` will queue the item and it will be displayed when the current item has transitioned to hidden.\n* When an instance already exists, `show` replaces the content.\n\n\n**Signature**\n\n```typescript\nshow: \u003cT\u003e(options: Options\u003cT\u003e, componentOptions?: T) =\u003e Promise\u003cItem\u003cT\u003e\u003e;\n\ntype Dialogic.Options\u003cT\u003e = {\n  dialogic?: DialogicOptions\u003cT\u003e;\n} \u0026 T;\n```\n\n\n### `hide`\n\nHides an item.\n\n```javascript\ndialog.hide()\n```\n\nWhen identity options are used, only hides the item that match the identity options:\n\n```javascript\ndialog.hide({\n  dialogic: {\n    id: \"settings\", // example: use id and/or spawn\n  }\n})\n```\n\n**Signature**\n\n```typescript\nhide: \u003cT\u003e(options?: Options\u003cT\u003e, componentOptions?: T) =\u003e Promise\u003cItem\u003cT\u003e\u003e;\n\ntype Dialogic.Options\u003cT\u003e = {\n  dialogic?: DialogicOptions\u003cT\u003e;\n} \u0026 T;\n```\n\n\n### `dialogic` options\n\nOptions passed to `show`, `hide` and `hideAll`. The options are further explained below.\n\n| **Name**              | **Type**                                                                     | **Required** | **Description**                                                                                                                                                         | **Default value**                          |\n|-----------------------|------------------------------------------------------------------------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------|\n| `component`           | Function component                                                           | No           | The component to render as an item.                                                                                                                                     |                                            |\n| `className`           | `string`                                                                     | No           | Class added to the wrapper around `component`; also the base name for transition classes (more below).                                                                  |                                            |\n| `styles`              | `TransitionStyles` object or `(domElement: HTMLElement) =\u003e TransitionStyles` | No           | Pass transition styles in JS.                                                                                                                                           |                                            |\n| `timeout`             | `number` (ms)                                                                | No           | Creates a timer. When the dialog is completely shown the timer is started automatically. After timeout the dialog is hidden. Use `0` to prevent the timer from running. | For notifications `3000`                   |\n| `queued`              | `boolean`                                                                    | No           | Set to `true` to manage multiple dialogs in time (more useful for notifications).                                                                                       | `false`; for notifications `true`          |\n| `toggle`              | `boolean`                                                                    | No           | Set to `true` to make `show()` switch between shown and hidden state.                                                                                                   | `false`                                    |\n| `willShow`            | `(item: Dialogic.Item) =\u003e void`                                              | No           | Function called just before the item will be shown (before transitioning).                                                                                              |                                            |\n| `didShow`             | `(item: Dialogic.Item) =\u003e void`                                              | No           | Function called when the item is completely shown (after transitioning).                                                                                                |                                            |\n| `willHide`            | `(item: Dialogic.Item) =\u003e void`                                              | No           | Function called just before the item will be hidden (before transitioning).                                                                                             |                                            |\n| `didHide`             | `(item: Dialogic.Item) =\u003e void`                                              | No           | Function called when the item is completely hidden (after transitioning).                                                                                               |                                            |\n| `id`                  | `string`                                                                     | No           | Dialog identifier, useful when using multiple (stacked) items. See [Handling multiple items with identity options](#handling-multiple-items-with-identity-options)      | \"default_dialog\" or \"default_notification\" |\n| `spawn`               | `string`                                                                     | No           | Spawn identifier, useful when using multiple spawn locations. See [Handling multiple items with identity options](#handling-multiple-items-with-identity-options)       | \"default_spawn\"                            |\n| `...componentOptions` | `any`                                                                        | No           | Options to pass to the `component`.                                                                                                                                     |                                            |\n\n\n**Signature**\n\n```typescript\ntype IdentityOptions = {\n  id?: string;\n  spawn?: string;\n}\n\ntype DialogicOptions\u003cT\u003e = {\n  className?: string;\n  component?: any;\n  willShow?: ConfirmFn\u003cT\u003e;\n  didShow?: ConfirmFn\u003cT\u003e;\n  willHide?: ConfirmFn\u003cT\u003e;\n  didHide?: ConfirmFn\u003cT\u003e;\n  domElement?: HTMLElement;\n  queued?: boolean;\n  styles?: TransitionStyles | TransitionStylesFn;\n  timeout?: number;\n  toggle?: boolean;\n} \u0026 IdentityOptions;\n\ntype ConfirmFn\u003cT\u003e = (item: Item\u003cT\u003e) =\u003e void;\n```\n\nFor more type information, see [index.d.ts](https://github.com/ArthurClemens/dialogic/blob/development/packages/dialogic/index.d.ts).\n\n\n\n#### `component`\n\nPass the component that will be rendered.\n\n* [Example with Mithril](./packages/dialogic-mithril/README.md#component)\n\n\n#### `className`\n\nCreate transitions by writing styles using the format `className-suffix` - where suffix is defined by its transition point.\n\n| **Class suffix** | **When is the class set** | **What should the style do**                                               |\n|------------------|---------------------------|----------------------------------------------------------------------------|\n| `-show-start`    | Start of show transition  | Initial state before the item is shown                                     |\n| `-show-end`      | End of show transition    | State for the shown item, including the transition (properties, duration)  |\n| `-hide-start`    | Start of hide transition  | Initial state before the item is hidden                                    |\n| `-hide-end`      | End of hide transition    | State for the hidden item, including the transition (properties, duration) |\n\n\nDefine those classes in CSS to create transitions. For example with `className` \"dialog\":\n\n```css\n.dialog {\n  transition: opacity 300ms ease-in-out;\n  opacity: 0;\n}\n.dialog-show-start {}\n.dialog-show-end {\n  opacity: 1;\n}\n.dialog-hide-start {}\n.dialog-hide-end {\n  opacity: 0;\n}\n```\n\nUse regular CSS syntax to define delays. Note that delays should be written at the \"end\" transition.\n\nIn this example, the dialog will transition towards the end fully visible and with a delay of half a second:\n\n```css\n.dialog-show-end {\n  opacity: 1;\n  transition-delay: 500ms;\n}\n```\n\n\n\n#### `styles`\n\nPass a style object in JavaScript instead of using a CSS file. This allows for more dynamic styling based on the current element state.\n\n| **Property** | **When is the style read**                                                                     | **What should the style do**                                               |\n|--------------|------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|\n| `default`    | The default style is read at every transition moment and combined with the other styles below. | Anything that saves duplication.                                           |\n| `showStart`  | Start of show transition                                                                       | Initial state before the item is shown                                     |\n| `showEnd`    | End of show transition                                                                         | State for the shown item, including the transition (properties, duration)  |\n| `hideStart`  | Start of hide transition                                                                       | Initial state before the item is hidden                                    |\n| `hideEnd`    | End of hide transition                                                                         | State for the hidden item, including the transition (properties, duration) |\n\nEither pass a styles object, or pass a function that returns the styles object. Because the function accepts the item's DOM elemment, styles can be modified by the current DOM state.\n\nThe object is read again for every transition, so in this example the `height` of the DOM element always reads the current height at that moment.\n\n```javascript\nstyles: (domElement: HTMLElement) =\u003e {\n  const height = domElement.getBoundingClientRect().height\n\n  return {\n    default: {\n      transition: \"all 300ms ease-in-out\",\n    },\n    showStart: {\n      opacity: \"0\",\n      transform: `translate3d(0, ${height}px, 0)`,\n    },\n    showEnd: {\n      opacity: \"1\",\n      transform: \"translate3d(0, 0px,  0)\",\n    },\n    hideEnd: {\n      transitionDuration: \"450ms\",\n      transform: `translate3d(0, ${height}px, 0)`,\n      opacity: \"0\",\n    },\n  }\n}\n\ndialog.show({\n  dialogic: {\n    styles\n  },\n})\n```\n\n\n#### `timeout`\n\nCreates a timer. The timer starts when the item is completely shown. After timeout the item will be hidden. Use `0` to prevent the timer from running.\n\n```javascript\ndialog.show({\n  dialogic: {\n    timeout: 3000 // in ms\n  },\n})\n```\n\nSee also: [timer functions](timer-functions)\n\n\n#### `queued`\n\nWhen `true`, items are shown sequentially, instead of replacing the previous item (when using the same `id` and `spawn`) or shown simultaneously (when using a different `id` or `spawn`).\n\n`notification` is queued by default, so no additional setting is needed.\n\n```javascript\ndialog.show({\n  dialogic: {\n    queued: true\n  },\n})\n```\n\n\n#### `toggle`\n\nSet to `true` to make `dialog.show()` switch between shown and hidden state.\n\nSo to show and to hide a dialog, use:\n\n```javascript\ndialog.show({\n  dialogic: {\n    toggle: true\n  },\n})\n```\n\n\n#### `willShow`\n\nFunction called just before the item will be shown (before transitioning).\n\n```javascript\ndialog.show({\n  dialogic: {\n    willShow: (item) =\u003e {\n      // before the item will be shown\n    }\n  },\n})\n```\n\n#### `didShow`\n\nFunction called when the item is completely shown (after transitioning).\n\n```javascript\ndialog.show({\n  dialogic: {\n    didShow: (item) =\u003e {\n      // item is shown\n    }\n  },\n})\n```\n\n#### `willHide`\n\nFunction called just before the item will be hidden (before transitioning).\n\n```javascript\ndialog.show({\n  dialogic: {\n    didHide: (item) =\u003e {\n      // before the item will be hidden\n    }\n  },\n})\n```\n\n#### `didHide`\n\nFunction called when the item is completely hidden (after transitioning).\n\n```javascript\ndialog.show({\n  dialogic: {\n    didHide: (item) =\u003e {\n      // item is hidden\n    }\n  },\n})\n```\n\n#### Component options\n\nAlls options that are passed to the show functions, except for `dialogic`, are passed to the component.\n\nHere the component receives option `title`:\n\n```javascript\ndialog.show({\n  dialogic: {\n    component: DialogView,\n  },\n  title: \"Dialog Title\"\n})\n```\n\n\n### `hideAll`\n\nHides all items. All items are transitioned to their hide state.\n\nFor queued items only the first item will be transitioned - the remaining items will be removed from the queue.\n\n```javascript\ndialog.hideAll()\n```\n\nWhen identity options are used, only hides the items that match the identity options:\n\n```javascript\ndialog.hideAll({\n  id: \"settings\", // example: use id and/or spawn\n})\n```\n\nOptional `dialogicOptions` may be passed with specific transition options. This comes in handy when all items should hide in the same way.\n\n```javascript\nconst hideAllStyles = {\n  showEnd: {\n    opacity: \"1\",\n  },\n  hideEnd: {\n    transition: \"all 450ms ease-in-out\",\n    opacity: \"0\",\n  },\n}\n\ndialog.hideAll({\n  styles: hideAllStyles\n})\n```\n\n\n**Signature**\n\n```typescript\nhideAll: (dialogicOptions?: DialogicOptions\u003cunknown\u003e) =\u003e Promise\u003cItem\u003cT\u003e[]\u003e;\n```\n\n\n### `resetAll`\n\nResets and hides all items. All items are reset without any transitions.\n\n```javascript\ndialog.resetAll()\n```\n\nWhen identity options are used, only resets the items that match the identity options:\n\n```javascript\ndialog.resetAll({\n  id: \"settings\", // example: use id and/or spawn\n})\n```\n\n**Signature**\n\n```typescript\nresetAll: (identityOptions?: IdentityOptions) =\u003e Promise\u003cItem\u003cunknown\u003e[]\u003e;\n```\n\n\n### Handling multiple items with identity options\n\nDialogic can handle multiple items in space (simulaneous view) and in time (sequential view).\n\nDialogs and notifications each have their own namespace and are handled separately.\n\n* `dialog`: namespace \"dialog\"\n* `notification`: namespace \"notification\"\n\nItems can further be differentiated using identity options:\n\n* `id` - Differentiates simulaneous items.\n* `spawn` - Diffentiates locations from where to show items. Each Dialog or Notification component has its own `spawn` identifier.\n\nWhen no `id` or `spawn` is passed, default names are used.\n\n\n#### Simultaneous, at the same location\n\n```javascript\ndialog.show({\n  dialogic: {\n    id: \"profile\",\n  },\n  title: \"Profile dialog\"\n})\n\ndialog.show({\n  dialogic: {\n    id: \"confirm\",\n  },\n  title: \"Confirm deletion of profile\"\n})\n```\n\n#### Simultaneous, at different locations\n\n```javascript\ndialog.show({\n  dialogic: {\n    spawn: \"main\",\n  },\n  title: \"Main dialog\"\n})\n\ndialog.show({\n  dialogic: {\n    spawn: \"settings\",\n  },\n  title: \"Settings dialog\"\n})\n```\n\nEach spawn identifier refers to a Dialog or Notification component.\n\nWith Mithril:\n\n```javascript\nm(Dialog, { spawn: \"main\" })\nm(Dialog, { spawn: \"settings\" })\n```\n\nWith React:\n\n```tsx\n\u003cDialog spawn=\"1\" /\u003e\n\u003cDialog spawn=\"settings\" /\u003e\n```\n\nWith Svelte:\n\n```javascript\n\u003cDialog spawn=\"1\" /\u003e\n\u003cDialog spawn=\"settings\" /\u003e\n```\n\n\n#### Sequence of items\n\nTo show a sequence of items, option `queued` must be set to `true`. `notification` is queued by default, so no additional setting is needed.\n\n\n\n### `exists`\n\nReturns a boolean that indicates if an item with given identity options is displayed.\n\nTo check if any dialog exists:\n\n```javascript\nconst exists = dialog.exists()\n```\n\nWhen identity options are used, only checks for items that match the identity options:\n\n```javascript\nconst exists = dialog.exists({\n  id: \"settings\", // example: use id and/or spawn\n})\n```\n\n**Signature**\n\n```typescript\nexists: (identityOptions?: IdentityOptions) =\u003e boolean\n```\n\nReact: requires [useDialogicState](./packages/dialogic-react/README.md#usedialogicstate).\n\n\n### `getCount`\n\nReturns the number of items. Also counts the queued items that are not yet displayed.\n\n```javascript\nconst count = notification.getCount()\n```\n\nWhen identity options are used, only resets the items that match the identity options:\n\n```javascript\nconst count = notification.getCount({\n  id: \"settings\", // example: use id and/or spawn\n})\n```\n\n**Signature**\n\n```typescript\ngetCount: (identityOptions?: IdentityOptions) =\u003e number;\n```\n\nReact: requires [useDialogicState](./packages/dialogic-react/README.md#usedialogicstate).\n\n\n### Timer functions\n\n#### `pause`\n\nPauses an item if it has a timer.\n\nWithout identity options, `pause` will pause all items within the same namespace (so: all notifications, or all dialogs):\n\n```javascript\nnotification.pause()\n```\n\nWhen identity options are used, pauses the items (within the same namespace) that match the identity options:\n\n```javascript\nnotification.pause({\n  id: \"settings\", // example: use id and/or spawn\n})\n```\n\n**Signature**\n\n```typescript\npause: (identityOptions?: IdentityOptions) =\u003e Promise\u003cItem\u003cT\u003e[]\u003e;\n```\n\n\n#### `resume`\n\nResumes a paused item.\n\nWithout identity options, `resume` will resume all paused items within the same namespace (so: all notifications, or all dialogs):\n\n```javascript\nnotification.resume()\n```\n\nWhen identity options are used, resumes the items (within the same namespace) that match the identity options:\n\n```javascript\nnotification.resume({\n  id: \"settings\", // example: use id and/or spawn\n})\n```\n\nOptional `minimumDuration` can be passed to nudge the timer so it will show at least for `minimumDuration` ms:\n\n```javascript\nnotification.resume({\n  minimumDuration: 3000\n})\n```\n\n\n**Signature**\n\n```typescript\nresume: (commandOptions?: CommandOptions) =\u003e Promise\u003cItem\u003cT\u003e[]\u003e;\n\ntype CommandOptions = IdentityOptions \u0026 TimerResumeOptions;\n\ntype TimerResumeOptions = {\n  minimumDuration?: number;\n}\n```\n\n\n#### `isPaused`\n\nReturns whether an item has been paused.\n\n```javascript\nnotification.isPaused()\n```\n\nWhen identity options are used, finds the item that matches the identity:\n\n```javascript\nnotification.isPaused({\n  id: \"settings\", // example: use id and/or spawn\n})\n```\n\n\n**Signature**\n\n```typescript\nisPaused: (identityOptions?: IdentityOptionsg) =\u003e boolean;\n```\n\nReact: requires [useDialogicState](./packages/dialogic-react/README.md#usedialogicstate).\n\n\n#### `getRemaining`\n\nReturns the remaining timer duration in ms.\n\n```javascript\nconst remaining = notification.getRemaining()\n```\n\nWhen identity options are used, finds the item that matches the identity:\n\n```javascript\nconst remaining = notification.getRemaining({\n  id: \"settings\", // example: use id and/or spawn\n})\n```\n\n**Signature**\n\n```typescript\ngetRemaining: (identityOptions?: IdentityOptions) =\u003e number | undefined;\n```\n\nReact: requires [useDialogicState](./packages/dialogic-react/README.md#usedialogicstate).\n\n\n#### `useRemaining` \n\nHook that continuously returns the current remaining time.\n\n* Mithril: this is an alternative for [`getRemaining`](#getremaining).\n* React: use this to get the remaining time. See: [useRemaining](./packages/dialogic-react/README.md#useremaining).\n\n\n**Signature**\n\n```typescript\nuseRemaining: (props: UseRemainingProps) =\u003e (number | undefined)[];\n\ntype UseRemainingProps = {\n  instance: Dialogic.DialogicInstance;\n  id?: string;\n  spawn?: string;\n\n  /**\n   * Set to true to return seconds instead of milliseconds.\n   */\n  roundToSeconds?: boolean;\n};\n```\n\n\n### Automatically responding to a variable state, such as a route\n\nIt is often desired to automatically show a dialog at a given route, so that it can be accessed by URL, and the browser back button will hide the dialog.\n\nA common pattern is to create a Route that contains the dialog component. A React example with React Router:\n\n```tsx\nimport { Route, useRouteMatch } from 'react-router-dom';\n\nconst match = useRouteMatch();\nconst dialogPath = `${match.url}/edit`;\n\n\u003cRoute path={dialogPath}\u003e\n  // Dialog should appear here\n\u003c/Route\u003e\n```\n\nThe hooks `useDialogic`, `useDialog` and `useNotification`  allow for a declarative way of controlling elements. The element will be shown when a condition is met (such as the current route), and automatically hidden as soon as the condition is no longer met.\n\n* `useDialog` - `useDialogic` with `instance` preset to `dialog`.\n  * For Svelte: use component `UseDialog`\n* `useNotification` - `useDialogic` with `instance` preset to `notification`.\n  * For Svelte: use component `UseNotification` \n* `useDialogic` - generic hook that accepts `instance` of type `Dialogic.DialogicInstance`.\n  * For Svelte: use component `useDialogic` \n\n\n\n\n### `useDialog`\n\n_For Svelte: use component [UseDialog](./packages/dialogic-svelte/README.md#usedialog)_\n\nThis is a hook to automatically show a dialog when a condition is met, for instance on URL location match. The dialog will hide when the condition is no longer met.\n\nIn the following example the dialog is shown when the URL location matches the given path. This is an example for React, but the Mithril version is very similar - see the [Mithril documentation](./packages/dialogic-mithril/README.md).\n\n```ts\nimport { useDialog } from 'dialogic-react';\nimport { MyDialog } from './MyDialog';\n\nconst MyComponent = () =\u003e {\n  const returnPath = '/';\n  const dialogPath = '/some-path';\n\n  useDialog({\n    isShow: window.location.pathname === dialogPath,\n    props: {\n      dialogic: {\n        component: MyDialog,\n        className: 'dialog',\n      },\n      // Props that will be passed to the MyDialog component\n      returnPath,\n    }\n  });\n};\n```\n\n**With TypeScript**\n\n`useDialog` has a generic type to match the values passed to the component.\n\n```ts\nimport { MyDialog, TDialogProps } from './MyDialog';\n\nconst returnPath = '/';\nconst dialogPath = '/some-path';\nconst content = 'Some async loaded content';\n\nuseDialog\u003cTDialogProps\u003e({\n  isShow: window.location.pathname === dialogPath \u0026\u0026 !!content,\n  deps: [content],\n  props: {\n    dialogic: {\n      component: MyDialog,\n      className: 'dialog',\n    },\n    // Props that will be passed to the MyDialog component\n    // These props match type TDialogProps\n    returnPath,\n    content,\n  }\n})\n```\n\n#### Options\n\n| **Name** | **Type**               | **Required** | **Description**                                                                                                                                                                                            | **Default value** |\n|----------|------------------------|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------|\n| `isShow` | `boolean`              | Yes          | A boolean value when to show the dialog.                                                                                                                                                                   | None              |\n| `deps`   | `React.DependencyList` | No           | Update the hook with these deps. Use this when the instance should appear conditionally, for instance only when content exists. Can be omitted when all content is static, so no re-rendering takes place. | `[]`              |\n| `props`  | `object`               | No           | Props to pass to the dialog.                                                                                                                                                                               | None              |\n\n\n#### Calling show and hide directly\n\n`useDialog` returns methods `show` and `hide`. Using these methods you can invoke dialogs just like `dialog.show` and `dialog.hide`, with the addition that an extra condition can be set when to automatically hide the dialog.\n\nIn the example below:\n\n* `show` is used to show the dialog\n* Component MyDialog receives props `hideDialog` to explicitly hide the dialog\n* `deps` includes the URL location - whenever it changes the dialog is hidden\n\n_See the [Mithril documentation](./packages/dialogic-mithril/README.md) for a Mithril specific example._\n\n```ts\nimport { useDialog } from 'dialogic-react';\nimport { MyDialog } from './MyDialog';\n\nconst MyComponent = () =\u003e {\n  const { show, hide } = useDialog({\n    deps: [window.location.href], // as soon this value changes ...\n    hide: true,                   // ... hide\n    props: {\n      dialogic: {\n        component: MyDialog,\n        className: 'dialog',\n      },\n      // Props that will be passed to the MyDialog component\n      returnPath,\n      hideDialog: () =\u003e hide(),\n    }\n  });\n\n  return (\n    \u003cbutton onClick={() =\u003e show()}\u003eShow dialog\u003c/button\u003e\n  )\n};\n```\n\n**Options for directed use**\n\nAll options listed above, plus:\n\n| **Name** | **Type**  | **Required** | **Description**                                                                                   | **Default value** |\n|----------|-----------|--------------|---------------------------------------------------------------------------------------------------|-------------------|\n| `isHide` | `boolean` | No           | Only for directed use. A boolean value when to hide the dialog. Can be used together with `deps`. | None              |\n\n\n\n## Shout out\n\nDialogic uses the [Meiosis state pattern](http://meiosis.js.org/) for state management.\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farthurclemens%2Fdialogic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farthurclemens%2Fdialogic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farthurclemens%2Fdialogic/lists"}