{"_id":"@alterai/ripple","_rev":"4-3d3738ea96b873e6e8ed318bbbdd2423","name":"@alterai/ripple","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"@alterai/ripple","version":"0.0.1","keywords":["ripple","ripple hooks","useRipple","react ripple hook","angular ripple"],"license":"MIT","_id":"@alterai/ripple@0.0.1","maintainers":[{"name":"alterai","email":"hanbiao4079@outlook.com"}],"homepage":"","dist":{"shasum":"a68a3486017f6aa304519aa852ed16cca8b91ac3","tarball":"https://registry.npmjs.org/@alterai/ripple/-/ripple-0.0.1.tgz","fileCount":9,"integrity":"sha512-oXM6zPOU9AFdpIZrhg6f5D0qC2IxIItJs44brviwufUoNgbkZitw7jnSiAR129Kc0iOq1lYTYRGt1E4PfyDdHg==","signatures":[{"sig":"MEUCIGAuDPUbxQZXzEFfBFnYOwKIpOF8i+jLMCGEouSYTaqDAiEAjYkKvagHRK74CmoF7oKy54Igtb1T2eeBWmpPT8xL9HM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16170},"main":"./dist/ripple.umd.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/ripple.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/ripple.es.js","require":"./dist/ripple.umd.js"}},"gitHead":"b4144f3e1144ad572d1917044c52a9a298707964","scripts":{"dev":"NODE_ENV=development vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"alterai","email":"hanbiao4079@outlook.com"},"_npmVersion":"10.7.0","description":"## Overview","directories":{},"_nodeVersion":"20.15.1","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-aria":"^3.36.0","react-stately":"^3.34.0","react-aria-components":"^1.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.7","eslint":"^9.18.0","globals":"^15.14.0","@eslint/js":"^9.18.0","typescript":"~5.6.3","@types/node":"^22.10.6","@types/react":"^19.0.7","sass-embedded":"^1.83.4","vite-plugin-dts":"^4.5.0","@types/react-dom":"^19.0.3","typescript-eslint":"^8.20.0","@vitejs/plugin-react-swc":"^3.7.2","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.18"},"_npmOperationalInternal":{"tmp":"tmp/ripple_0.0.1_1737448681289_0.9477428113923847","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@alterai/ripple","version":"0.0.2","keywords":["ripple","ripple hooks","useRipple","react ripple hook","angular ripple"],"license":"MIT","_id":"@alterai/ripple@0.0.2","maintainers":[{"name":"alterai","email":"hanbiao4079@outlook.com"}],"homepage":"","dist":{"shasum":"af2c900a0da20a0f44108f3271dc43814f12b186","tarball":"https://registry.npmjs.org/@alterai/ripple/-/ripple-0.0.2.tgz","fileCount":9,"integrity":"sha512-2lGTKBCK2Xfq+sOvdoOFC75HSD8sdYIJoSNp4v7rSuZLGYcm8HcSG6WTX5WT4BYiS5xrQRDA7MGPxDzB5cxDoA==","signatures":[{"sig":"MEQCIHQfNlrG4oSLPn4fZ9WGdFzR8wCFvR5T4vI4Q/Mi95ITAiBA82Cenx1ql8lqSbd847szVbMLm03ArLHOudouXjw/lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16168},"main":"./dist/ripple.umd.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/ripple.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/ripple.es.js","require":"./dist/ripple.umd.js"}},"gitHead":"580a7f52b7d8146c3566f6732c34e0ead30a549d","scripts":{"dev":"NODE_ENV=development vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"alterai","email":"hanbiao4079@outlook.com"},"_npmVersion":"10.7.0","description":"## Overview","directories":{},"_nodeVersion":"20.15.1","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-aria":"^3.36.0","react-stately":"^3.34.0","react-aria-components":"^1.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.7","eslint":"^9.18.0","globals":"^15.14.0","@eslint/js":"^9.18.0","typescript":"~5.6.3","@types/node":"^22.10.6","@types/react":"^19.0.7","sass-embedded":"^1.83.4","vite-plugin-dts":"^4.5.0","@types/react-dom":"^19.0.3","typescript-eslint":"^8.20.0","@vitejs/plugin-react-swc":"^3.7.2","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.18"},"_npmOperationalInternal":{"tmp":"tmp/ripple_0.0.2_1737448911802_0.613475332501934","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@alterai/ripple","version":"0.0.3","keywords":["ripple","ripple hooks","useRipple","react ripple hook","angular ripple"],"license":"MIT","_id":"@alterai/ripple@0.0.3","maintainers":[{"name":"alterai","email":"hanbiao4079@outlook.com"}],"homepage":"","dist":{"shasum":"fe8ec75d95adfb18ab7dd2f1fd08000575294a0a","tarball":"https://registry.npmjs.org/@alterai/ripple/-/ripple-0.0.3.tgz","fileCount":9,"integrity":"sha512-q5c4zhW4gqXwo7AL5gzpI+wTY9KqIgyj4GWPvhRqhH36/18qSB1w+qMfatgmVCOlMMYacIF9klmASIdTViiN/Q==","signatures":[{"sig":"MEUCIQDhRwEsGw3R8BrrYoZ1Xib4vKTynqhdJGwXE/8u6Xf/AQIgT8NUURVsOtIAmJ4O1R0RJ1IUXogMEKKn9lTJVVd+R3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17966},"main":"./dist/ripple.umd.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/ripple.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/ripple.es.js","require":"./dist/ripple.umd.js"}},"gitHead":"e7b82cac633562e6db1237ffadddf85c014b1d0e","scripts":{"dev":"NODE_ENV=development vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"alterai","email":"hanbiao4079@outlook.com"},"_npmVersion":"10.7.0","description":"This package is compatible with React 19 and above. It leverages the latest features and improvements in React 19 to provide a smooth and efficient ripple effect. Make sure to have React 19 or later installed in your project to use this package.","directories":{},"_nodeVersion":"20.15.1","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-aria":"^3.36.0","react-stately":"^3.34.0","react-aria-components":"^1.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.7","eslint":"^9.18.0","globals":"^15.14.0","@eslint/js":"^9.18.0","typescript":"~5.6.3","@types/node":"^22.10.6","@types/react":"^19.0.7","sass-embedded":"^1.83.4","vite-plugin-dts":"^4.5.0","@types/react-dom":"^19.0.3","typescript-eslint":"^8.20.0","@vitejs/plugin-react-swc":"^3.7.2","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.18"},"_npmOperationalInternal":{"tmp":"tmp/ripple_0.0.3_1737457664687_0.14092017751984232","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@alterai/ripple","version":"0.0.4","keywords":["ripple","ripple hooks","useRipple","react ripple hook","angular ripple"],"license":"MIT","_id":"@alterai/ripple@0.0.4","maintainers":[{"name":"alterai","email":"hanbiao4079@outlook.com"}],"homepage":"","dist":{"shasum":"8e1e64380886c79fedf2c374f38589430c5ae3fc","tarball":"https://registry.npmjs.org/@alterai/ripple/-/ripple-0.0.4.tgz","fileCount":9,"integrity":"sha512-b5b7Kr2SvJ5qerIdlbnG1AAIo95O0nCY0R7dxuyWKfRaQR/vmcQcWj+9jYGXuJlICD3PQgre/H5QfGZwVCgyfg==","signatures":[{"sig":"MEUCIBOFOeUSvqRSCEFw5ECin6eqF0eyq66GEkiGc6uWnBn4AiEAvI0LACE0FfsGHLi2GOY2yHFzJFpmr4zKGcWEFB5scyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17966},"main":"./dist/ripple.umd.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/ripple.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/ripple.es.js","require":"./dist/ripple.umd.js"}},"gitHead":"31aeae689d302631cdf95e5ff553c1bb0a524383","scripts":{"dev":"NODE_ENV=development vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"alterai","email":"hanbiao4079@outlook.com"},"_npmVersion":"10.7.0","description":"This package is compatible with React 19 and above. It leverages the latest features and improvements in React 19 to provide a smooth and efficient ripple effect. Make sure to have React 19 or later installed in your project to use this package.","directories":{},"_nodeVersion":"20.15.1","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-aria":"^3.36.0","react-stately":"^3.34.0","react-aria-components":"^1.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.7","eslint":"^9.18.0","globals":"^15.14.0","@eslint/js":"^9.18.0","typescript":"~5.6.3","@types/node":"^22.10.6","@types/react":"^19.0.7","sass-embedded":"^1.83.4","vite-plugin-dts":"^4.5.0","@types/react-dom":"^19.0.3","typescript-eslint":"^8.20.0","@vitejs/plugin-react-swc":"^3.7.2","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.18"},"_npmOperationalInternal":{"tmp":"tmp/ripple_0.0.4_1737458039236_0.6117054091599541","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@alterai/ripple","version":"1.0.0","type":"module","types":"./dist/types/index.d.ts","main":"./dist/ripple.umd.js","module":"./dist/ripple.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/ripple.es.js","require":"./dist/ripple.umd.js"}},"keywords":["ripple","ripple hooks","useRipple","react ripple hook","angular ripple"],"license":"MIT","homepage":"","scripts":{"dev":"NODE_ENV=development vite","build":"tsc -b && vite build","lint":"eslint .","preview":"vite preview"},"dependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@eslint/js":"^9.18.0","@types/node":"^22.10.6","@types/react":"^19.0.7","@types/react-dom":"^19.0.3","@vitejs/plugin-react-swc":"^3.7.2","eslint":"^9.18.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.18","globals":"^15.14.0","sass-embedded":"^1.83.4","typescript":"~5.6.3","typescript-eslint":"^8.20.0","vite":"^6.0.7","vite-plugin-dts":"^4.5.0"},"_id":"@alterai/ripple@1.0.0","gitHead":"390bcaef0c5eff568a4845bede3403c4bece7f2f","description":"This package is compatible with React 19 and above. It leverages the latest features and improvements in React 19 to provide a smooth and efficient ripple effect. Make sure to have React 19 or later installed in your project to use this package.","_nodeVersion":"20.15.1","_npmVersion":"10.7.0","dist":{"integrity":"sha512-kHlkxpDnthBA5qFSh2LoyCEpdYrl7O25FTHJHe4EE5KxHnTllq7EMD9YscyOlys3Yy13giBacFvielaSR4mykQ==","shasum":"15efc5ecfbb48d59a573e4b658237ffe3b114bb8","tarball":"https://registry.npmjs.org/@alterai/ripple/-/ripple-1.0.0.tgz","fileCount":9,"unpackedSize":17866,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDfcPDfa3RMGpo/yG6QccI6F1Y89s4kUOWhm83ZQOHLZwIhAMM9K3uLYtTCB7Q+h5R8b/CClxaOOU3AXy9yaXygwhCz"}]},"_npmUser":{"name":"alterai","email":"hanbiao4079@outlook.com"},"directories":{},"maintainers":[{"name":"alterai","email":"hanbiao4079@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ripple_1.0.0_1737602988450_0.3827468242382279"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-21T08:38:01.161Z","modified":"2025-01-23T03:29:48.802Z","0.0.1":"2025-01-21T08:38:01.460Z","0.0.2":"2025-01-21T08:41:51.972Z","0.0.3":"2025-01-21T11:07:44.856Z","0.0.4":"2025-01-21T11:13:59.408Z","1.0.0":"2025-01-23T03:29:48.619Z"},"license":"MIT","keywords":["ripple","ripple hooks","useRipple","react ripple hook","angular ripple"],"description":"This package is compatible with React 19 and above. It leverages the latest features and improvements in React 19 to provide a smooth and efficient ripple effect. Make sure to have React 19 or later installed in your project to use this package.","maintainers":[{"name":"alterai","email":"hanbiao4079@outlook.com"}],"readme":"# Ripple Component and useRipple Hook Documentation\n\n    This package is compatible with React 19 and above. It leverages the latest features and improvements in React 19 to provide a smooth and efficient ripple effect. Make sure to have React 19 or later installed in your project to use this package. \n  \n## Overview\n\nThe `Ripple` component and `useRipple` hook are used to create a material design ripple effect, which is a visual feedback mechanism for user interactions. The ripple effect is commonly used in buttons, cards, and other interactive elements.\n\n## Ripple Component\n\n### Props\n\n- **`as`**: (Optional) The HTML element or SVG element to render as the container for the ripple effect. Defaults to `'div'`.\n- **`color`**: (Optional) The color of the ripple effect. Can be any valid CSS color value.\n- **`centered`**: (Optional) If `true`, the ripple effect will originate from the center of the container. Defaults to `false`.\n- **`radius`**: (Optional) The radius of the ripple effect. If not provided, the ripple will expand to the furthest corner of the container.\n- **`disabled`**: (Optional) If `true`, the ripple effect will be disabled. Defaults to `false`.\n- **`unbounded`**: (Optional) If `true`, the ripple effect will not be constrained by the container's boundaries. Defaults to `false`.\n- **`animation`**: (Optional) Configuration for the ripple animation.\n  - **`enterDuration`**: (Optional) The duration of the ripple's enter animation in milliseconds. Defaults to `225`.\n  - **`exitDuration`**: (Optional) The duration of the ripple's exit animation in milliseconds. Defaults to `150`.\n- **`terminateOnPointerUp`**: (Optional) If `true`, the ripple effect will terminate when the pointer is released. Defaults to `false`.\n\n### Usage\n\n```jsx\nimport React from 'react';\nimport { Ripple } from '@alterai/ripple';\n\nfunction MyButton() {\n  return (\n    <Ripple color=\"rgba(0, 0, 0, 0.1)\" centered style={{ padding: '10px 20px', borderRadius: '5px', backgroundColor: '#007bff', color: '#fff', border: 'none', cursor: 'pointer' }}>\n        Click Me\n    </Ripple>\n  );\n}\n\nexport default MyButton;\n```\n\n## useRipple Hook\n\n### Parameters\n\n- **`config`**: (Optional) Configuration object for the ripple effect.\n  - **`color`**: (Optional) The color of the ripple effect. Can be any valid CSS color value.\n  - **`centered`**: (Optional) If `true`, the ripple effect will originate from the center of the container. Defaults to `false`.\n  - **`radius`**: (Optional) The radius of the ripple effect. If not provided, the ripple will expand to the furthest corner of the container.\n  - **`persistent`**: (Optional) If `true`, the ripple effect will persist until manually faded out. Defaults to `false`.\n  - **`disabled`**: (Optional) If `true`, the ripple effect will be disabled. Defaults to `false`.\n  - **`animation`**: (Optional) Configuration for the ripple animation.\n    - **`enterDuration`**: (Optional) The duration of the ripple's enter animation in milliseconds. Defaults to `225`.\n    - **`exitDuration`**: (Optional) The duration of the ripple's exit animation in milliseconds. Defaults to `150`.\n  - **`terminateOnPointerUp`**: (Optional) If `true`, the ripple effect will terminate when the pointer is released. Defaults to `false`.\n\n### Return Value\n\n- **`containerRef`**: A ref that should be attached to the container element where the ripple effect will be applied.\n- **`launch`**: A function to manually trigger a ripple effect at a specific coordinate.\n  - **Parameters**:\n    - **`x`**: The x-coordinate of the ripple's origin.\n    - **`y`**: The y-coordinate of the ripple's origin.\n    - **`config`**: (Optional) Configuration object for the ripple effect.\n- **`fadeOutAll`**: A function to fade out all active ripples.\n- **`fadeOutAllNonPersistent`**: A function to fade out all non-persistent ripples.\n\n### Usage\n\n```jsx\nimport React, { useRef } from 'react';\nimport { useRipple } from '@alterai/ripple';\n\nfunction MyButton() {\n  const { containerRef } = useRipple({ color: 'rgba(0, 0, 0, 0.1)', centered: true });\n\n  return (\n    <button ref={containerRef} style={{ padding: '10px 20px', borderRadius: '5px', backgroundColor: '#007bff', color: '#fff', border: 'none', cursor: 'pointer' }}>\n      Click Me\n    </button>\n  );\n}\n\nexport default MyButton;\n```\n\n## Examples\n\n### Centered Ripple\n\n```jsx\n<Ripple as=\"button\" color=\"rgba(0, 0, 0, 0.1)\" centered style={{ padding: '10px 20px', borderRadius: '5px', backgroundColor: '#007bff', color: '#fff', border: 'none', cursor: 'pointer' }}>\n    Centered Ripple\n</Ripple>\n```\n\n### Custom Radius Ripple\n\n```jsx\n<Ripple as=\"button\" color=\"rgba(0, 0, 0, 0.1)\" radius={50} style={{ padding: '10px 20px', borderRadius: '5px', backgroundColor: '#007bff', color: '#fff', border: 'none', cursor: 'pointer' }}>\n    Custom Radius Ripple\n</Ripple>\n```\n\n### Persistent Ripple\n\n```jsx\n<Ripple as=\"button\" color=\"rgba(0, 0, 0, 0.1)\" persistent style={{ padding: '10px 20px', borderRadius: '5px', backgroundColor: '#007bff', color: '#fff', border: 'none', cursor: 'pointer' }}>\n    Persistent Ripple\n</Ripple>\n```\n\n### Unbounded Ripple\n\n```jsx\n<Ripple as=\"button\" color=\"rgba(0, 0, 0, 0.1)\" unbounded style={{ padding: '10px 20px', borderRadius: '5px', backgroundColor: '#007bff', color: '#fff', border: 'none', cursor: 'pointer' }}>\n    Unbounded Ripple\n</Ripple>\n```\n\n### Custom Animation Duration\n\n```jsx\n<Ripple as=\"button\" color=\"rgba(0, 0, 0, 0.1)\" animation={{ enterDuration: 500, exitDuration: 300 }} style={{ padding: '10px 20px', borderRadius: '5px', backgroundColor: '#007bff', color: '#fff', border: 'none', cursor: 'pointer' }}>\n  Custom Animation Duration\n</Ripple>\n```\n\n### Manual Ripple Trigger with `launch`\n\n```jsx\nimport React, { useRef } from 'react';\nimport { useRipple } from '@alterai/ripple';\n\nfunction MyCustomComponent() {\n  const { containerRef, launch } = useRipple({ color: 'rgba(0, 0, 0, 0.1)' });\n\n  const handleClick = (event) => {\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n    launch(x, y);\n  };\n\n  return (\n    <div ref={containerRef} onClick={handleClick} style={{ padding: '20px', borderRadius: '10px', backgroundColor: '#f8f9fa', border: '1px solid #ddd', cursor: 'pointer', textAlign: 'center' }}>\n      Click anywhere in this box\n    </div>\n  );\n}\n\nexport default MyCustomComponent;\n```\n\n## Notes\n\n- The `Ripple` component is a wrapper that automatically handles the ripple effect for its children.\n- The `useRipple` hook provides more control and can be used in custom components where the `Ripple` component might not be suitable.\n- The ripple effect is designed to work with both HTML elements and SVG elements.\n\n","readmeFilename":"README.md"}