{"id":16893521,"url":"https://github.com/odudek/noti-react","last_synced_at":"2025-08-22T22:03:16.537Z","repository":{"id":33012640,"uuid":"149621276","full_name":"ODudek/noti-react","owner":"ODudek","description":"Demo: https://odudek.github.io/noti-react/","archived":false,"fork":false,"pushed_at":"2024-01-08T13:42:12.000Z","size":2469,"stargazers_count":3,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T10:18:43.548Z","etag":null,"topics":["notification","react","react-component","react-notification"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ODudek.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}},"created_at":"2018-09-20T14:21:16.000Z","updated_at":"2021-12-07T18:14:09.000Z","dependencies_parsed_at":"2023-01-14T23:02:49.896Z","dependency_job_id":null,"html_url":"https://github.com/ODudek/noti-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ODudek%2Fnoti-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ODudek%2Fnoti-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ODudek%2Fnoti-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ODudek%2Fnoti-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ODudek","download_url":"https://codeload.github.com/ODudek/noti-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248409401,"owners_count":21098768,"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":["notification","react","react-component","react-notification"],"created_at":"2024-10-13T17:15:26.646Z","updated_at":"2025-04-11T13:25:45.015Z","avatar_url":"https://github.com/ODudek.png","language":"JavaScript","readme":"# Noti-react\n[![npm version](https://img.shields.io/npm/v/noti-react.svg?style=flat-square)](https://www.npmjs.com/package/noti-react)\n[![Build Status](https://img.shields.io/travis/ODudek/noti-react/master.svg?style=flat-square)](https://travis-ci.org/ODudek/noti-react)\n[![dependencies](https://david-dm.org/odudek/noti-react.svg?style=flat-square)](https://github.com/odudek/noti-react)\n[![npm](https://img.shields.io/npm/dt/noti-react.svg?style=flat-square)](https://www.npmjs.com/package/noti-react)\n[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/react.svg?style=flat-square)](https://github.com/ODudek/noti-react)\n[![HitCount](http://hits.dwyl.io/odudek/noti-react.svg)](http://hits.dwyl.io/odudek/noti-react)\n\nSimple notification component for React with support for Typescript!\n\n![demo](./demo.jpg)\n\n## Install\n\n1. Use npm \n```bash\nnpm install noti-react\n```\n2. Use yarn\n```bash\nyarn add noti-react\n```\n\n## Notification\n\n|property| propType|required|default|description|\n|---|---|---|---|---|\n|type|string ('error', 'info', 'success', 'warn')|- |'info'|Deside which type of notification do you want to use!|\n|label|string|yes|-|Text which you want to display|\n|autoHide|bool|-|true|Auto hide notification|\n|animationTime|number|-|500|Time of animation duration in miliseconds|\n|position|string ('top-left', 'top-right', 'bottom-left', 'bottom-right')|-|'bottom-right'| Position in which corner do you want to display notification|\n|hideTime|number|-|5000|After this time notification will close if `autoHide` props is `true`|\n|customColor|string (rgb string like '#000000') |-|-|Add your custom color|\n|className|string|-|-|Customize style by adding custom class|\n\n## Example\n\n1. Import notification component\n```javascript\nimport { Notification } from 'noti-react';\n```\n2. Use it in your component\n```javascript\n\u003cNotification\n    label=\"Example of notification\"\n/\u003e\n```\n\n## Tests\n\nRun tests\n```bash\nnpm test\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodudek%2Fnoti-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodudek%2Fnoti-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodudek%2Fnoti-react/lists"}