{"id":18974986,"url":"https://github.com/bufferapp/buffer-redux-hover","last_synced_at":"2025-04-19T16:44:12.486Z","repository":{"id":65840762,"uuid":"82080142","full_name":"bufferapp/buffer-redux-hover","owner":"bufferapp","description":"Keep React component hover state in redux","archived":false,"fork":false,"pushed_at":"2017-03-14T21:05:24.000Z","size":24,"stargazers_count":12,"open_issues_count":1,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-13T09:16:32.997Z","etag":null,"topics":[],"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/bufferapp.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":"2017-02-15T16:16:37.000Z","updated_at":"2019-03-17T10:56:32.000Z","dependencies_parsed_at":"2023-02-13T14:10:11.769Z","dependency_job_id":null,"html_url":"https://github.com/bufferapp/buffer-redux-hover","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/bufferapp%2Fbuffer-redux-hover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bufferapp%2Fbuffer-redux-hover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bufferapp%2Fbuffer-redux-hover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bufferapp%2Fbuffer-redux-hover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bufferapp","download_url":"https://codeload.github.com/bufferapp/buffer-redux-hover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249740858,"owners_count":21318711,"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-11-08T15:16:53.187Z","updated_at":"2025-04-19T16:44:12.470Z","avatar_url":"https://github.com/bufferapp.png","language":"JavaScript","readme":"# buffer-redux-hover\n\n[![Build Status](https://travis-ci.org/bufferapp/buffer-redux-hover.svg?branch=master)](https://travis-ci.org/bufferapp/buffer-redux-hover)\n\nKeep react component hover state in redux\n\n## Usage\n\nCombine the reducer under the `hover` state tree:\n\n```js\nimport { combineReducers } from 'redux';\nimport { reducer as hover } from '@bufferapp/redux-hover';\n\nconst app = combineReducers({\n  hover, // important to have this under the hover state tree\n});\n\nexport default app;\n```\n\nCreate a component that has a `hovered`, `onMouseEnter` and `onMouseLeave` prop:\n\n```js\nimport React from 'react';\nimport { connectHoverable } from '@bufferapp/redux-hover';\n\nconst MyHoverableComponent = ({\n  hovered, // managed by redux-hover\n  onMouseEnter,\n  onMouseLeave,\n}) =\u003e {\n  const style = {\n    background: hovered ? 'red' : 'blue',\n  };\n  return (\n    \u003cdiv\n      style={style}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    \u003e\n      Hover This\n    \u003c/div\u003e\n  );\n};\n\nMyHoverableComponent.propTypes = {\n  hoverId: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]),\n  hovered: PropTypes.bool,\n  onMouseEnter: PropTypes.func,\n  onMouseLeave: PropTypes.func,\n};\n\nexport default connectHoverable(MyHoverableComponent);\n```\n\nPlace `MyHoverableComponent` on the page and set a `hoverId`:\n\n```js\nimport React from 'react';\nimport MyHoverableComponent from './MyHoverableComponent';\n\nconst App = () =\u003e\n  \u003cdiv\u003e\n    \u003cMyHoverableComponent hoverId={'myComponent'}/\u003e\n    \u003cMyHoverableComponent hoverId={'myOtherComponent'}/\u003e\n  \u003c/div\u003e;\n\nexport default App;\n```\n\n## Notes\n\n### hovered prop\n\nThe hovered prop is set to `true` on `MyHoverableComponent` when the mouse is hovering over it. Otherwise it's set to false.\n\n### Choosing hoverId's\n\nAs long as id's are different, they'll be independently hoverable. The above example sets the strings manually, but you could also use a `uuid()` too.\n\nThis also means that ids with the same value will all get the hover state applied when any of them are hovered.\n\n### MyHoverableComponent is cloned with `React.clone`\n\nThis keeps the number of elements on the page minimal but adds a little overhead to clone the hoverable component.\n\n### Manually Dispatching Actions For Hover Or Unhover\n\nSometimes there's cases where manually dispatching an action might be necessary. A good example is a button that removes itself (clearing a todo list item for example). The actions are exposed for this purpose so they can be dispatched:\n\n```js\nimport {\n  unhover,\n} from '@bufferapp/redux-hover';\n\nexport const REMOVE_TODO = 'REMOVE_TODO';\n\nexport const removeTodo = todoListId =\u003e dispatch =\u003e\n  Promise.all([\n    dispatch({\n      type: REMOVE_TODO,\n      todoListId,\n    }),\n    dispatch(unhover(`todo-list-item/remove-${todoListId}`)),\n  ]);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbufferapp%2Fbuffer-redux-hover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbufferapp%2Fbuffer-redux-hover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbufferapp%2Fbuffer-redux-hover/lists"}