{"_id":"@dmalagueta/feedback-message-ios","name":"@dmalagueta/feedback-message-ios","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@dmalagueta/feedback-message-ios","version":"1.0.0","type":"module","description":"iOS-inspired notification component for React with smooth animations, auto-dismiss, and accessibility.","homepage":"https://dmalagueta.github.io/feedbackmessageios","repository":{"type":"git","url":"git+https://github.com/DMalagueta/feedbackmessageios.git"},"license":"MIT","author":{"name":"Diogo Malagueta"},"main":"./dist/index.cjs.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.cjs.js","types":"./dist/index.d.ts"},"./styles.css":"./dist/style.css"},"scripts":{"dev":"vite","build":"tsc && vite build","build:lib":"vite build --mode lib","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","deploy":"gh-pages -d dist","prepublishOnly":"npm run build:lib"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@types/react":"^18.2.43","@types/react-dom":"^18.2.17","@typescript-eslint/eslint-plugin":"^6.14.0","@typescript-eslint/parser":"^6.14.0","@vitejs/plugin-react":"^4.2.1","eslint":"^8.55.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","gh-pages":"^6.1.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.2.2","vite":"^5.0.8"},"keywords":["react","notification","feedback","ios","toast","component"],"_id":"@dmalagueta/feedback-message-ios@1.0.0","gitHead":"01cb779b56849844536eb9cd3c696981ad014488","bugs":{"url":"https://github.com/DMalagueta/feedbackmessageios/issues"},"_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-6lIiTy+CpbvlpIlb8TCrsbSl+V66MRf7iO9TBcvwt++p9Cyspwgx9uAfyeEmyxIye/WLDamG84zt7vVI8pcEkQ==","shasum":"dc5f77e22b08c54c37eed40d2f1d460ed9e3462c","tarball":"https://registry.npmjs.org/@dmalagueta/feedback-message-ios/-/feedback-message-ios-1.0.0.tgz","fileCount":5,"unpackedSize":16279,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDsMf9+6dIYRW7anzKGrkUPnvCPJ25apQeh39A2qOS9TgIgAKAMVJOPFLDvXfh5xAaXR0uSfWrVtyUnmUTvoFwG240="}]},"_npmUser":{"name":"dmalagueta","email":"mrmalagueta@gmail.com"},"directories":{},"maintainers":[{"name":"dmalagueta","email":"mrmalagueta@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/feedback-message-ios_1.0.0_1771241047557_0.2680248129394649"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-16T11:24:07.434Z","1.0.0":"2026-02-16T11:24:07.715Z","modified":"2026-02-16T11:24:07.916Z"},"maintainers":[{"name":"dmalagueta","email":"mrmalagueta@gmail.com"}],"description":"iOS-inspired notification component for React with smooth animations, auto-dismiss, and accessibility.","homepage":"https://dmalagueta.github.io/feedbackmessageios","keywords":["react","notification","feedback","ios","toast","component"],"repository":{"type":"git","url":"git+https://github.com/DMalagueta/feedbackmessageios.git"},"author":{"name":"Diogo Malagueta"},"bugs":{"url":"https://github.com/DMalagueta/feedbackmessageios/issues"},"license":"MIT","readme":"# FeedbackMessage\r\n\r\niOS-inspired notification component for React with smooth animations, auto-dismiss with progress bar, and full accessibility.\r\n\r\nURL: https://dmalagueta.github.io/feedbackmessageios/\r\n\r\n![FeedbackMessage Demo](./preview.gif)\r\n\r\n## Features\r\n\r\n- Smooth slide-in/fade-out animations driven by CSS transitions\r\n- Auto-dismiss with configurable duration and synced progress bar\r\n- Six position options (top/bottom, left/center/right)\r\n- Close button and click-to-dismiss\r\n- Keyboard dismiss with Escape\r\n- ARIA roles and focus indicators\r\n- Fully responsive on mobile\r\n- onClose callback for parent state sync\r\n- Zero external dependencies\r\n\r\n## Installation\r\n```bash\r\nnpm install\r\n```\r\n\r\n## Usage\r\n\r\n```tsx\r\nimport { useState } from \"react\";\r\nimport FeedbackMessage from \"./component/FeedbackMessage\";\r\n\r\nfunction App() {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <>\r\n      <button onClick={() => setIsOpen(true)}>Show</button>\r\n      <FeedbackMessage\r\n        message=\"Changes saved successfully\"\r\n        type=\"success\"\r\n        duration={5000}\r\n        isOpen={isOpen}\r\n        onClose={() => setIsOpen(false)}\r\n        position=\"top-center\"\r\n      />\r\n    </>\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `message` | `string` | required | The notification text |\r\n| `type` | `\"success\" \\| \"error\" \\| \"warning\" \\| \"info\"` | required | Determines color and icon |\r\n| `duration` | `number` | `5000` | Auto-dismiss time in milliseconds |\r\n| `isOpen` | `boolean` | required | Controls visibility |\r\n| `onClose` | `() => void` | -- | Called when notification is dismissed |\r\n| `position` | `\"top-center\" \\| \"top-left\" \\| \"top-right\" \\| \"bottom-center\" \\| \"bottom-left\" \\| \"bottom-right\"` | `\"top-center\"` | Where the notification appears |\r\n\r\n## Running the Project\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n## Deploying\r\n\r\n```bash\r\nnpm run build && npm run deploy\r\n```\r\n","readmeFilename":"README.md","_rev":"1-ff1a8e05b657c809317878d22dedee5f"}