cht8687 / React Hover
Licence: mit
React hover --- make hover easy http://cht8687.github.io/react-hover/example/
Stars: ✭ 64
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Hover
React Animated Weather
Animated weather component for React inspired by Skycons http://darkskyapp.github.io/skycons/ ☀️
Stars: ✭ 34 (-46.87%)
Mutual labels: react-component
React Echarts V3
React.js(v16.x+) component wrap for ECharts.js(v3.x+)
Stars: ✭ 48 (-25%)
Mutual labels: react-component
React No Content
A SVG react component to display when there's no content.
Stars: ✭ 59 (-7.81%)
Mutual labels: react-component
React Notifications Component
Delightful and highly customisable React Component to notify your users
Stars: ✭ 978 (+1428.13%)
Mutual labels: react-component
React For Electron Only
React component for rendering component for Electron based clients only
Stars: ✭ 45 (-29.69%)
Mutual labels: react-component
React Contenteditable
React component for a div with editable contents
Stars: ✭ 1,057 (+1551.56%)
Mutual labels: react-component
React Colorful
🎨 A tiny (2,5 KB) color picker component for React and Preact apps
Stars: ✭ 951 (+1385.94%)
Mutual labels: react-component
React Bps
🔱 Create breakpoints to your component props
Stars: ✭ 64 (+0%)
Mutual labels: react-component
React Sane Contenteditable
React component with sane defaults to make any element contentEditable
Stars: ✭ 45 (-29.69%)
Mutual labels: react-component
React Router Form
<Form> is to <form> as <Link> is to <a>
Stars: ✭ 58 (-9.37%)
Mutual labels: react-component
Spicy Datatable
React.js datatables without jQuery. Smart react datatable that includes search, pagination and localization.
Stars: ✭ 36 (-43.75%)
Mutual labels: react-component
React Stonecutter
Animated grid layout component for React
Stars: ✭ 1,089 (+1601.56%)
Mutual labels: react-component
React Markdown Preview
React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.
Stars: ✭ 34 (-46.87%)
Mutual labels: react-component
React Filtered Multiselect
Filtered multi-select React component
Stars: ✭ 61 (-4.69%)
Mutual labels: react-component
React Xmasonry
Simple, minimalistic and featured native masonry layout for React JS.
Stars: ✭ 62 (-3.12%)
Mutual labels: react-component
React Topbar Progress Indicator
`topbar` progress indicator as a React component
Stars: ✭ 58 (-9.37%)
Mutual labels: react-component
React Hover --- Turn anything to a 'hoverable' object
Installation
npm
$ npm install --save react-hover
Codesandbox Demo
Demo
Usage
You can turn plain HTML or your custom trigger/hover components in React-hover.
Below is the example of custom components:
<ReactHover options={optionsCursorTrueWithMargin}>
<Trigger type="trigger">
<TriggerComponent />
</Trigger>
<Hover type="hover">
<HoverComponent />
</Hover>
</ReactHover>
Or plain HTML element:
<ReactHover options={optionsCursorTrueWithMargin}>
<Trigger type="trigger">
<h1 style={{ background: '#abbcf1', width: '200px' }}> Hover on me </h1>
</Trigger>
<Hover type="hover">
<h1> I am hover HTML </h1>
</Hover>
</ReactHover>
Options
options
: PropTypes.object.isRequired
Set the options.
const options = {
followCursor: true,
shiftX: 20,
shiftY: 0,
}
followCursor
: define if hover object follow mouse cursor
shiftX
: left-right shift the hover object to the mouse cursor
shiftY
: up-down shift the hover object to the mouse cursor
type
type
: PropTypes.string
Set the type.
<Trigger type='trigger'>
<Hover type='hover'>
This prop defines the type name. It must be declared as above if you minify your code in production.
Development
$ git clone [email protected]:cht8687/react-hover.git
$ cd react-hover
$ npm install
$ npm run dev
Then
open http://localhost:8080/webpack-dev-server/
Want to buy me a coffee?
License
MIT
Contributors
Thanks to these wonderful developers for helping this project:
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].