{"id":26898503,"url":"https://github.com/mohammad-prb/js-flash","last_synced_at":"2025-10-11T14:16:06.269Z","repository":{"id":284941570,"uuid":"956540191","full_name":"mohammad-prb/js-flash","owner":"mohammad-prb","description":"JavaScript package for flash messages.","archived":false,"fork":false,"pushed_at":"2025-07-29T16:41:54.000Z","size":275,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-22T01:54:25.930Z","etag":null,"topics":["alert","angular","flash","flash-messages","message","notification","npm","package","react","typescript","vue"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/js-flash","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/mohammad-prb.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,"zenodo":null}},"created_at":"2025-03-28T12:29:55.000Z","updated_at":"2025-07-29T16:41:58.000Z","dependencies_parsed_at":"2025-04-04T15:28:45.647Z","dependency_job_id":null,"html_url":"https://github.com/mohammad-prb/js-flash","commit_stats":null,"previous_names":["mohammad-prb/js-flash"],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/mohammad-prb/js-flash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-prb%2Fjs-flash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-prb%2Fjs-flash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-prb%2Fjs-flash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-prb%2Fjs-flash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohammad-prb","download_url":"https://codeload.github.com/mohammad-prb/js-flash/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-prb%2Fjs-flash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007501,"owners_count":26084313,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["alert","angular","flash","flash-messages","message","notification","npm","package","react","typescript","vue"],"created_at":"2025-04-01T05:47:54.446Z","updated_at":"2025-10-11T14:16:06.263Z","avatar_url":"https://github.com/mohammad-prb.png","language":"TypeScript","readme":"# JavaScript Flash Message (js-flash)\n\nJavaScript package for displaying flash messages in various types with full customization capabilities.\n\nThis package is designed to be simple and easy to use.\nIt provides a simple way to display flash messages in your web applications.\n\nIt can be used in pure **JavaScript** or **TypeScript** projects, or any other JavaScript framework like **React**, **Vue**, **Angular** etc.\n\n## How to use\n\n1. Using CDN:\n\n```html\n\u003c!-- Current version --\u003e\n\u003cscript src=\"https://unpkg.com/js-flash@1.4.6\"\u003e\u003c/script\u003e\n\n\u003c!-- Always the latest version --\u003e\n\u003cscript src=\"https://unpkg.com/js-flash\"\u003e\u003c/script\u003e\n```\n\n2. Install the package using `npm`:\n\n```bash\nnpm i js-flash\n```\n\nImport the package in your project and use it:\n\n```javascript\nimport Flash from 'js-flash';\n\nnew Flash('Hello World!', 'info');\n```\n\n\u003e [!NOTE]\n\u003e If you are using CDN, you don't need to import anything, just use it.\n\nYou can pass the following parameters to the `Flash` constructor:\n\n- `message` (string): The message to display.\n- `type` (string): The type of the message. The following types are available:\n    - `'info'`\n    - `'success'`\n    - `'warning'`\n    - `'error'`\n- `config` (object): An optional object for configuration.\n\n### Options\n\nThe following options are available for configuration:\n\n| Option         | Type      | Default      | Description                                                                                                                                      |\n|:---------------|:----------|:-------------|:-------------------------------------------------------------------------------------------------------------------------------------------------|\n| `icon`         | `boolean` | `true`       | Whether to display an icon with the message.                                                                                                     |\n| `animation`    | `boolean` | `true`       | Whether to enable animations for message.                                                                                                        |\n| `closeByClick` | `boolean` | `true`       | Whether to close the message by clicking on it.                                                                                                  |\n| `closeTimeout` | `number`  | `5000`       | The time in milliseconds after which the message will be automatically closed.\u003cbr/\u003e(If set to `0`, the message will not be closed automatically) |\n| `pauseOnHover` | `boolean` | `true`       | Whether to pause the `closeTimout` on message hover.                                                                                             |\n| `loading`      | `boolean` | `true`       | Whether to display loading bar for `closeTimout`.                                                                                                |\n| `direction`    | `string`  | `'ltr'`      | The direction of the message. (`'ltr'` or `'rtl'`)                                                                                               |\n| `position`     | `string`  | `'top-left'` | Position of the message on the page.                                                                                                             |\n| `borderRadius` | `number`  | `8`          | The border radius of the message.                                                                                                                |\n| `fontFamily`   | `string`  | `undefined`  | The font family of the message. If not set, the body font will be applied.                                                                       |\n\nThese positions are available:\n- `'top'`\n- `'top-left'`\n- `'top-right'`\n- `'bottom'`\n- `'bottom-left'`\n- `'bottom-right'`\n\nExample with options:\n\n```javascript\nnew Flash('Hello World!', 'info', {\n    animation: false,\n    closeTimeout: 0,\n    position: 'bottom-left'\n});\n```\n\n\u003e [!NOTE]\n\u003e You can configure the default options for each message in the [Configuring item defaults](#configuring-item-defaults) section.\n\n### Demo\n\nFlash messages look like this. (In `ltr` and `rtl` mode)\n\n![Flash message demo image](/src/images/js-flash-demo.png)\n\n\u003e [!NOTE]\n\u003e You can customize the style of the flash messages in the [types configuration](#types-configuration).\n\n## Action Button\n\nYou can add an action button to the message by passing the `action` object to the constructor:\n\n```javascript\nnew Flash('Post deleted!', 'info', {\n    position: 'bottom',\n    action: {\n        text: 'Undo',\n        handler: () =\u003e {\n            console.log('Undo clicked.');\n        }\n    }\n});\n```\n\nThe `action` object have the following properties:\n\n| Property  | Type       | Description              |\n|:----------|:-----------|:-------------------------|\n| `text`    | `string`   | The button text.         |\n| `handler` | `function` | The click event handler. |\n\n\u003e [!NOTE]\n\u003e You can customize the style of the action buttons in the [types configuration](#types-configuration).\n\n## Properties\n\nYou can access the following properties of the flash message:\n\n| Property      | Type             | Description                                           |\n|:--------------|:-----------------|:------------------------------------------------------|\n| `element`     | `HTMLDivElement` | The message element.                                  |\n| `messageText` | `string`         | The message text.                                     |\n| `messageType` | `string`         | The message type.                                     |\n| `itemConfig`  | `object`         | The message configuration.                            |\n| `closed`      | `boolean`        | Whether the message is closed.                        |\n| `whenClosed`  | `Promise\u003cvoid\u003e`  | The promise that resolves when the message is closed. |\n\nexample:\n\n```javascript\nconst flash = new Flash('Hello World!', 'info');\n\nflash.element.classList.add('custom-class');\nflash.element.style.opacity = \"0.5\";\n\nflash.whenClosed.then(() =\u003e {\n    console.log('Message closed');\n});\n```\n\n\u003e [!IMPORTANT]\n\u003e All properties are read-only.\n\n## Methods\n\nYou can use the following methods to interact with the flash message:\n\n| Method          | Description          |\n|:----------------|:---------------------|\n| `close()`       | Closes the message.  |\n| `pauseTimout()` | Pause `closeTimout`. |\n| `playTimout()`  | Play `closeTimout`.  |\n\nexample:\n\n```javascript\nconst flash = new Flash('Hello World!', 'info', {\n    closeTimeout: 0,    // Disable auto close\n    closeByClick: false // Disable close by click\n});\n\nfunction myFnc() {\n    flash.close();\n}\n```\n\nAlso these methods are available as static methods:\n\n| Method                      | Description                                    |\n|:----------------------------|:-----------------------------------------------|\n| `closeAll()`                | Closes all messages.                           |\n| `closeFirst()`              | Closes the first message.                      |\n| `closeLast()`               | Closes the last message.                       |\n| `closeByType(type)`         | Closes all messages of the specified type.     |\n| `closeByPosition(position)` | Closes all messages of the specified position. |\n\n\u003e [!NOTE]\n\u003e Obviously, all of these methods apply to live messages.\n\nexample:\n\n```javascript\nFlash.closeAll();\nFlash.closeByType('warning');\nFlash.closeByPosition('bottom-right');\n```\n\n## Base Configuration\n\nYou can configure the base settings of the flash messages by `setBaseConfig` method:\n\n```javascript\nFlash.setBaseConfig({\n    offset: 25,\n    gap: 15\n});\n```\n\nThe following options are available:\n\n| Option   | Type     | Default         | Description                                  |\n|:---------|:---------|:----------------|:---------------------------------------------|\n| `offset` | `number` | `20`            | The offset from the edge of the screen. (px) |\n| `gap`    | `number` | `10`            | The gap between messages. (px)               |\n| `types`  | `object` | (Types section) | The properties for different message types.  |\n\n### Types Configuration\n\nYou can set these properties for different message types in base configuration:\n\n| Property          | Description                           |\n|:------------------|:--------------------------------------|\n| `icon`            | Icon data URL. (`data:image/svg+xml`) |\n| `color`           | Text and icon color.                  |\n| `backgroundColor` | Background color.                     |\n| `borderColor`     | Border color.                         |\n| `loadingColor`    | Loading color.                        |\n| `button`          | Button styles.                        |\n\nExample:\n\n```javascript\nFlash.setBaseConfig({\n    types: {\n        info: {\n            backgroundColor: '#3498db',\n            color: '#fff'\n        },\n        success: {\n            borderColor: '#27ae60',\n            button: {\n                backgroundColor: '#27ae60',\n                color: '#fff'\n            }\n        }\n    }\n});\n```\n\nThe above code changes the default values mentioned.\n\nDefault values are:\n\n```javascript\ntypes = {\n    info: {\n        icon: 'data:image/svg+xml,...',\n        color: '#2196F3',\n        backgroundColor: '#E3F2FD',\n        borderColor: '#BBDEFB',\n        loadingColor: '#BBDEFB',\n        button: {\n            color: '#2196F3',\n            backgroundColor: 'transparent',\n            borderColor: '#BBDEFB',\n        }\n    },\n    success: {\n        icon: 'data:image/svg+xml,...',\n        color: '#4CAF50',\n        backgroundColor: '#E8F5E9',\n        borderColor: '#C8E6C9',\n        loadingColor: '#C8E6C9',\n        button: {\n            color: '#4CAF50',\n            backgroundColor: 'transparent',\n            borderColor: '#C8E6C9',\n        }\n    },\n    warning: {\n        icon: 'data:image/svg+xml,...',\n        color: '#BD8F04',\n        backgroundColor: '#FFF8E1',\n        borderColor: '#FFDC74',\n        loadingColor: '#FFDC74',\n        button: {\n            color: '#BD8F04',\n            backgroundColor: 'transparent',\n            borderColor: '#FFDC74',\n        }\n    },\n    error: {\n        icon: 'data:image/svg+xml,...',\n        color: '#F44336',\n        backgroundColor: '#FFEBEE',\n        borderColor: '#FFCDD2',\n        loadingColor: '#FFCDD2',\n        button: {\n            color: '#F44336',\n            backgroundColor: 'transparent',\n            borderColor: '#FFCDD2',\n        }\n    }\n}\n```\n\n## Configuring item defaults\n\nYou can configure the default settings for each message. (Constructor options)\n\n```javascript\nFlash.setDefaultItemConfig({\n    icon: false,\n    animation: false,\n    closeByClick: false,\n    closeTimeout: 0,\n    pauseOnHover: false,\n    loading: false,\n    position: 'bottom-right',\n    borderRadius: 12,\n    fontFamily: 'Arial'\n});\n```\n\n## TypeScript\n\nThis package is written in TypeScript and includes type definitions.\nYou can use it in TypeScript projects.\n\n```typescript\nimport type { BaseConfig, ItemConfig } from 'js-flash';\n```\n\nThe following types are available:\n\n| Type            | Description                                         |\n|:----------------|:----------------------------------------------------|\n| `FlashType`     | The flash message types.                            |\n| `FlashPosition` | The flash message positions.                        |\n| `ItemConfig`    | Configuration object for each item.                 |\n| `BaseConfig`    | Base configuration object.                          |\n| `DeepPartial`   | The utitily type to make objects optional in depth. |\n\nexample:\n\n```typescript\nimport Flash from 'js-flash';\nimport type { BaseConfig, DeepPartial } from 'js-flash';\n\nconst obj: DeepPartial\u003cBaseConfig\u003e = {\n    offset: 25,\n    gap: 15,\n    types: {\n        info: {\n            backgroundColor: '#3498db',\n            color: '#fff'\n        },\n        success: {\n            borderColor: '#27ae60'\n        }\n    }\n}\n\nFlash.setBaseConfig(obj);\n```\n\n## Future Plans\n\nThe project is designed to be scalable.\nIf you have any suggestions, feel free to contribute or create an issue.\n\n## Contributions\n\nWe welcome contributions to expand this project.\nIf you'd like to improve this project, please create a pull request.\n\n## Support\n\nIf this project was helpful, please consider giving it a **star**.\nYour support helps us grow!\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammad-prb%2Fjs-flash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohammad-prb%2Fjs-flash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammad-prb%2Fjs-flash/lists"}