All Projects → cht8687 → React Hover

cht8687 / React Hover

Licence: mit
React hover --- make hover easy http://cht8687.github.io/react-hover/example/

Programming Languages

javascript
184084 projects - #8 most used programming language

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 Nouislider
React wrapper on NoUiSlider
Stars: ✭ 41 (-35.94%)
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 Splide
The Splide component for React.
Stars: ✭ 32 (-50%)
Mutual labels:  react-component
React Tweenful
Animation engine designed for React
Stars: ✭ 48 (-25%)
Mutual labels:  react-component
React Console
Simple react console emulator
Stars: ✭ 64 (+0%)
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

Join the chat at https://gitter.im/cht8687/react-hover

React Hover --- Turn anything to a 'hoverable' object

Circle CI NPM Version Coverage Status Build Status Downloads Dependency Status License

React hover

Installation

npm

$ npm install --save react-hover

Codesandbox Demo

Codesandbox example

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?

ko-fi

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].