{"id":13725918,"url":"https://github.com/vigetlabs/react-ink","last_synced_at":"2025-06-13T16:41:45.799Z","repository":{"id":23711737,"uuid":"27084281","full_name":"vigetlabs/react-ink","owner":"vigetlabs","description":"A React component for adding material design style ink","archived":false,"fork":false,"pushed_at":"2023-06-03T12:01:19.000Z","size":931,"stargazers_count":323,"open_issues_count":15,"forks_count":36,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-05-05T19:14:14.597Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-ink.netlify.com/","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/vigetlabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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}},"created_at":"2014-11-24T16:34:45.000Z","updated_at":"2025-02-02T00:47:23.000Z","dependencies_parsed_at":"2024-02-04T16:20:17.153Z","dependency_job_id":"ca3297b1-d7e7-43db-8e5f-717a24a3c464","html_url":"https://github.com/vigetlabs/react-ink","commit_stats":{"total_commits":132,"total_committers":14,"mean_commits":9.428571428571429,"dds":"0.25757575757575757","last_synced_commit":"b10cbaf5bab0df5b8049c8b663be906381f1f518"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vigetlabs%2Freact-ink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vigetlabs%2Freact-ink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vigetlabs%2Freact-ink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vigetlabs%2Freact-ink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vigetlabs","download_url":"https://codeload.github.com/vigetlabs/react-ink/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253411183,"owners_count":21904134,"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":[],"created_at":"2024-08-03T01:02:41.149Z","updated_at":"2025-06-13T16:41:45.724Z","avatar_url":"https://github.com/vigetlabs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Ink\n\n[![CircleCI](https://img.shields.io/circleci/project/vigetlabs/react-ink.svg?maxAge=2592000)](https://circleci.com/gh/vigetlabs/react-ink)\n[![npm](https://img.shields.io/npm/v/react-ink.svg?maxAge=2592000)](https://www.npmjs.com/package/react-ink)\n[![npm](https://img.shields.io/npm/dm/react-ink.svg?maxAge=2592000)](https://www.npmjs.com/package/react-ink)\n\nAdd the Material Design ripple effect to React component.\n\n![Ink Gif](http://cl.ly/image/1r36102z0M3r/ink.gif)\n\n## Usage\n\nInk must be placed within another component with a position is not `static` (so `relative`, `fixed`, or `absolute`).\n\n```js\nimport React from 'react'\nimport Ink from 'react-ink'\n\nconst InkeyButton () =\u003e {\n  return (\n    \u003cbutton style={{ position: \"relative\" }}\u003e\n      \u003cInk /\u003e\n    \u003c/button\u003e\n  )\n}\n```\n\nThere are several options available for how `\u003cInk /\u003e` renders, see the [`getDefaultProps()` declaration](https://github.com/vigetlabs/react-ink/blob/master/src/index.js#L33-L37), however descriptions follow:\n\n\n## Configuration\n\n```javascript\n{\n  background : true,      // When true, pressing the ink will cause the background to fill with the current color\n  duration   : 1000,      // Duration of the full animation completion\n  opacity    : 0.25,      // The opacity of the ink blob\n  radius     : 150,       // The size of the effect, will not exceed bounds of containing element\n  recenter   : true,      // When true, recenter will pull ink towards the center of the containing element\n  style      : {...},     // See src/style.js. Any rules set here will extend these values\n  hasTouch   : true|false // Override internal hasTouch detection\n}\n```\n\n\n***\n\n\u003ca href=\"http://code.viget.com\"\u003e\n  \u003cimg src=\"http://code.viget.com/github-banner.png\" alt=\"Code At Viget\"\u003e\n\u003c/a\u003e\n\nVisit [code.viget.com](http://code.viget.com) to see more projects from [Viget.](https://viget.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvigetlabs%2Freact-ink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvigetlabs%2Freact-ink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvigetlabs%2Freact-ink/lists"}