Skip to content

Commit d6363b7

Browse files
committed
docs: add <HoverSensor> docs
1 parent 04a3021 commit d6363b7

File tree

2 files changed

+68
-1
lines changed

2 files changed

+68
-1
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ const MyComponent = mock();
5050
- [Sensors](./docs/Sensors.md)
5151
- [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
5252
- [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
53+
- [`<HoverSensor>`](./docs/HoverSensor.md), [`withHover()`](./docs/HoverSensor.md#withhover-hoc), and [`@withHover`](./docs/HoverSensor.md#withhover-decorator)
5354
- [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
5455
- [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
5556
- [`<MotionSensor>`](./docs/MotionSensor.md), [`withMotion()`](./docs/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/MotionSensor.md#withmotion-decorator)
@@ -65,7 +66,6 @@ const MyComponent = mock();
6566
- [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
6667
- [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), [`withWindowScroll()`](./docs/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/WindowScrollSensor.md#withwindowscroll-decorator)
6768
- [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), [`withWindowSize()`](./docs/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/WindowSizeSensor.md#withwindowsize-decorator)
68-
- `HoverSensor`, `withHover()`, and `@withHover`
6969
- `ActiveSensor`, `withActive()`, and `@withActive`
7070
- `FocusSensor`, `withFocus()`, and `@withFocus`
7171
- Generators

docs/HoverSensor.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# `<HoverSensor>`
2+
3+
Render prop that tracks elements hover status. Attaches to the root element, or provides a binding, if `bond` prop specified.
4+
5+
## Example
6+
7+
Use it as FaCC, attach to root element
8+
9+
```jsx
10+
import {HoverSensor} from 'libreact/lib/HoverSensor';
11+
12+
<HoverSensor>{({isHover}) =>
13+
<div>{isHover ? 'hovered' : 'no hovered'}</div>
14+
}</HoverSensor>
15+
```
16+
17+
Use `bond` to bind to any element
18+
19+
```jsx
20+
import {HoverSensor} from 'libreact/lib/HoverSensor';
21+
22+
<HoverSensor bond>{({bond, isHover}) =>
23+
<div>
24+
<div {...bond}>{isHover ? 'hovered' : 'no hovered'}</div>
25+
</div>
26+
}</HoverSensor>
27+
```
28+
29+
30+
## Props
31+
32+
Prop signature
33+
34+
```ts
35+
interface IHoverSensorProps {
36+
bond?: boolean | string;
37+
}
38+
```
39+
40+
, where
41+
42+
- `bond` - optional, string, specifies the bond name. If boolean and set to `true`, bond with name `"bond"` is created.
43+
44+
45+
## `withHover()` HOC
46+
47+
HOC that merges `hover` prop into enhanced component's props. With HOC interface you always have to use bond.
48+
49+
```jsx
50+
import {withHover} from 'libreact/lib/HoverSensor';
51+
52+
const MyCompWithHover = withHover(MyComp);
53+
```
54+
55+
56+
## `@withHover` decorator
57+
58+
React stateful component decorator that adds `hover` prop.
59+
60+
```js
61+
import {withHover} from 'libreact/lib/HoverSensor';
62+
63+
@withHover
64+
class MyComp extends Component {
65+
66+
}
67+
```

0 commit comments

Comments
 (0)