Skip to content

Commit c6b5453

Browse files
streamichstreamich
authored
Merge pull request #10 from MailOnline/feat/various-3
Feat/various 3
2 parents 1822f83 + dcdbe0c commit c6b5453

File tree

120 files changed

+4203
-473
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+4203
-473
lines changed

‎README.md

+53-36
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44

55
[![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
66

7-
React standard library, must-have toolbox for any React project.
7+
React standard library — must-have toolbox for any React project.
88

9-
- Collection of React sensors, FaCCs, HOCs, context providers, dummies, and [other goodies](#contents).
10-
- Isomorphic - all components work in browser and on server (and some in `react-native`).
9+
- Collection of React sensors, FaCCs, render props, HOCs, context providers, dummies, and [other goodies](#contents).
10+
- *Isomorphic* - all components work in browser and on server (and some in `react-native`).
1111
- See [demos](https://mailonline.github.io/libreact/) and [docs](#contents).
1212

1313
## Installation
@@ -28,52 +28,69 @@ const MyComponent = mock();
2828

2929
## Contents
3030

31-
- Dummies
32-
- [`mock()`](./docs/mock.md)
33-
- [`loadable()`](./docs/loadable.md)
34-
- [`lazy()`](./docs/lazy.md)
35-
- [`delayed()`](./docs/delayed.md)
36-
- [`invert()`](./docs/invert.md)
37-
- Sensors
31+
- [Introduction](./docs/Introduction.md)
32+
- [Dummies](./docs/Dummies.md)
33+
- [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
34+
- [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and [`viewport()`](./docs/viewport.md)
35+
- [Inversion](./docs/Inversion.md)
36+
- [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
37+
- [`<State>`](./docs/State.md) and [`withState()`](./docs/State.md#withstate-hoc)
38+
- [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
39+
- [`<Flipflop>`](./docs/Flipflop.md), [`withFlipflop()`](./docs/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/Flipflop.md#withflipflop-decorator)
40+
- [`<Value>`](./docs/Value.md), [`withValue()`](./docs/Value.md#withvalue-hoc), and [`@withValue`](./docs/Value.md#withvalue-decorator)
41+
- [`<Counter>`](./docs/Counter.md), [`withCounter()`](./docs/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/Counter.md#withcounter-decorator)
42+
- [`<List>`](./docs/List.md), [`withList()`](./docs/List.md#withlist-hoc), and [`@withList`](./docs/List.md#withlist-decorator)
43+
- [`<Map>`](./docs/Map.md), [`withMap()`](./docs/Map.md#withmap-hoc), and [`@withMap`](./docs/Map.md#withmap-decorator)
44+
- [Context](./docs/Context.md)
45+
- [`<Provider>`](./docs/Provider.md#provider), [`<Consumer>`](./docs/Provider.md#consumer), [`withContext()`](./docs/Provider.md#withcontext), and `@withContext`
46+
- [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
47+
- `<CssVars>`
48+
- [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
49+
- [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate-or-t), [`<T>`](./docs/translate.md#translate-or-t), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
50+
- [Sensors](./docs/Sensors.md)
3851
- [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
52+
- [`<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)
3954
- [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
4055
- [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
41-
- [`<NetworkSensor>`](./docs/NetworkSensor.md) and [`withNetwork()`](./docs/NetworkSensor.md#withnetwork)
42-
- [`<LightSensor>`](./docs/LightSensor.md)
43-
- [`<LocationSensor>`](./docs/LocationSensor.md)
44-
- [`<OrientationSensor>`](./docs/OrientationSensor.md) and [`withOrientation()`](./docs/OrientationSensor.md#withorientation)
56+
- [`<MotionSensor>`](./docs/MotionSensor.md), [`withMotion()`](./docs/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/MotionSensor.md#withmotion-decorator)
57+
- [`<MouseSensor>`](./docs/MouseSensor.md), [`withMouse()`](./docs/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/MouseSensor.md#withmouse-decorator)
58+
- [`<NetworkSensor>`](./docs/NetworkSensor.md), [`withNetwork()`](./docs/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/NetworkSensor.md#withnetwork-decorator)
59+
- [`<LightSensor>`](./docs/LightSensor.md), [`withLight()`](./docs/LightSensor.md#withlight-hoc), and [`@withLight`](./docs/LightSensor.md#withlight-decorator)
60+
- [`<LocationSensor>`](./docs/LocationSensor.md), [`withLocation()`](./docs/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/LocationSensor.md#withlocation-decora)
61+
- [`<OrientationSensor>`](./docs/OrientationSensor.md), [`withOrientation()`](./docs/OrientationSensor.md#withorientation-hoc), and [`@withOrientation`](./docs/OrientationSensor.md#withorientation-decorator)
4562
- [`<ScrollSensor>`](./docs/ScrollSensor.md)
46-
- [`<SizeSensor>`](./docs/SizeSensor.md)
47-
- [`<ViewportSensor>`](./docs/ViewportSensor.md), [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor), and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
48-
- [`<WidthSensor>`](./docs/WidthSensor.md)
49-
- [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md)
50-
- [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md)
63+
- [`<SizeSensor>`](./docs/SizeSensor.md), [`withSize()`](./docs/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/SizeSensor.md#withsize-decorator)
64+
- [`<WidthSensor>`](./docs/WidthSensor.md), [`withWidth()`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
65+
- [`<ViewportSensor>`](./docs/ViewportSensor.md), [`withViewport()`](./docs/ViewportSensor.md#withviewport-hoc), and [`@withViewport`](./docs/ViewportSensor.md#withviewport-decorator)
66+
- [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
67+
- [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), [`withWindowScroll()`](./docs/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/WindowScrollSensor.md#withwindowscroll-decorator)
68+
- [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), [`withWindowSize()`](./docs/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/WindowSizeSensor.md#withwindowsize-decorator)
69+
- `ActiveSensor`, `withActive()`, and `@withActive`
70+
- `FocusSensor`, `withFocus()`, and `@withFocus`
5171
- Generators
52-
- [`<Alert>`](./docs/Alert.md)
5372
- [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
54-
- [`<LocalStorage>`](./docs/LocalStorage.md)
55-
- `<Redirect>`
56-
- [`<Speak>`](./docs/Speak.md)
57-
- [`<Vibrate>`](./docs/Vibrate.md)
58-
- Context
59-
- [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), [`withContext()`](./docs/context.md#withcontext), and `@withContext`
60-
- [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
61-
- `<CssVars>`
62-
- [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`go()`](./docs/route.md#go), [`withRoute()`](./docs/route.md#withroute), and `@withRoute`
63-
- CSS resets
64-
- [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md)
65-
- [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
66-
- [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md)
67-
- [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md)
68-
- [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
73+
- [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
74+
- [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
75+
- [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/Sms.md), [`<Mailto>`](./docs/Mailto.md), and `<Tel>`
76+
- [`<FullScreen>`](./docs/FullScreen.md)
77+
- UI
78+
- `<Overlay>`
79+
- [CSS resets](./docs/CSS-resets.md)
80+
- [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
81+
- [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
6982
- [`<CssResetPoorMan>`](./docs/reset/CssResetPoorMan.md)
7083
- [`<CssResetShaunInman>`](./docs/reset/CssResetShaunInman.md)
7184
- [`<CssResetSiolon>`](./docs/reset/CssResetSiolon.md)
7285
- [`<CssResetTantek>`](./docs/reset/CssResetTantek.md)
7386
- [`<CssResetUniversal>`](./docs/reset/CssResetUniversal.md)
7487
- [`<CssResetYahoo>`](./docs/reset/CssResetYahoo.md)
7588
- Other
76-
- [`<Resolve>`](./docs/Resolve.md)
89+
- [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
90+
- [`getDisplayName()`](./docs/getDisplayName.md)
91+
- `<BrowserOnly>`, `<ServerOnly>`, and `<Environment>`
92+
- `<Locales>`
93+
- `<Draggable>`, `<Droppable>`, `<Parallax>`, `<Pin>`
7794

7895

7996
## License

‎docs/CSS-resets.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# CSS Resets
2+
3+
CSS reset components `<CssReset*>` provide a handy way to include CSS reset in your app.
4+
You simply need to render the css reset component somewhere in your JSX tree for it to take effect.
5+
6+
```jsx
7+
import CssResetEricMeyer from 'libreact/lib/reset/CssResetEricMeyer';
8+
9+
const App = () =>
10+
<div>
11+
<CssResetEricMeyer />
12+
{ /* ... */ }
13+
</div>
14+
```
15+
16+
When you un-mount a CSS reset component it will also remove the CSS automatically.
17+
18+
Below is a list of included CSS resets.
19+
20+
- [`<CssResetEricMeyer>`](./reset/CssResetEricMeyer.md)
21+
- [`<CssResetEricMeyerCondensed>`](./reset/CssResetEricMeyerCondensed.md)
22+
- [`<CssResetMinimalistic>`](./reset/CssResetMinimalistic.md)
23+
- [`<CssResetMinimalistic2>`](./reset/CssResetMinimalistic2.md)
24+
- [`<CssResetMinimalistic3>`](./reset/CssResetMinimalistic3.md)
25+
- [`<CssResetPoorMan>`](./reset/CssResetPoorMan.md)
26+
- [`<CssResetShaunInman>`](./reset/CssResetShaunInman.md)
27+
- [`<CssResetSiolon>`](./reset/CssResetSiolon.md)
28+
- [`<CssResetTantek>`](./reset/CssResetTantek.md)
29+
- [`<CssResetUniversal>`](./reset/CssResetUniversal.md)
30+
- [`<CssResetYahoo>`](./reset/CssResetYahoo.md)

‎docs/Counter.md

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# `<Counter>`
2+
3+
Allows you to keep a state of a counter value. Is similar to [`<Value>`](./Value.md) but its
4+
value is cast to `number` and you have an extra `inc(by = 1)` method that will increment your counter.
5+
6+
## Usage
7+
8+
```jsx
9+
import {Counter} from 'libreact/lib/Counter';
10+
11+
<Counter>{({value, set, inc}) =>
12+
<div onClick={() => inc(2))} onDoubleClick={() => set(0)}>
13+
{value}
14+
<div>
15+
}</Counter>
16+
```
17+
18+
## Props
19+
20+
Signature
21+
22+
```ts
23+
interface ICounterProps {
24+
init?: number;
25+
}
26+
```
27+
28+
, where
29+
30+
- `init` - optional, number, default value.
31+
32+
33+
## `withCounter()` HOC
34+
35+
HOC that merges `counter` prop into enhanced component's props.
36+
37+
```jsx
38+
import {withCounter} from 'libreact/lib/Counter';
39+
40+
const MyCompWithCounter = withCounter(MyComp);
41+
```
42+
43+
You can overwrite the injected prop name
44+
45+
```js
46+
const MyCompWithCounter = withCounter(MyComp, 'foobar');
47+
```
48+
49+
Or simply merge the whole object into your props
50+
51+
```js
52+
const MyCompWithCounter = withCounter(MyComp, '');
53+
```
54+
55+
Set default value
56+
57+
```js
58+
const MyCompWithCounter = withCounter(MyComp, '', -123);
59+
```
60+
61+
62+
63+
## `@withCounter` decorator
64+
65+
React stateful component decorator that adds `counter` prop.
66+
67+
```js
68+
import {withCounter} from 'libreact/lib/Counter';
69+
70+
@withCounter
71+
class MyComp extends Component {
72+
73+
}
74+
```
75+
76+
Specify different prop name
77+
78+
```js
79+
@withCounter('foobar')
80+
class MyComp extends Component {
81+
82+
}
83+
```
84+
85+
or merge the the whole object into props
86+
87+
```js
88+
@withCounter('')
89+
class MyComp extends Component {
90+
91+
}
92+
```
93+
94+
set starting value
95+
96+
```js
97+
@withCounter('', 123)
98+
class MyComp extends Component {
99+
100+
}
101+
```

‎docs/Dummies.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Dummies
2+
3+
Dummies are empty *"shell"* components that don't contain the actual implementation.
4+
5+
However, those dummies can be used as real React components and they will re-render
6+
automatically once they get implemented.
7+
8+
Essentially you can create dummies, which will not add any size to your bundle, use them,
9+
but implement them with real components only later when necessary.
10+
11+
- [`mock()`](./mock.md) - dummy that can be implemented using `.implement()` method.
12+
- [`loadable()`](./loadable.md) - dummy that can be loaded using `.load()` method.
13+
- [`lazy()`](./lazy.md) - like `loadable()`, but also loads automatically when rendered for the first time.
14+
- [`delayed()`](./delayed.md) - like `lazy()`, but its loading can be delayed.
15+
- [`viewport()`](./viewport.md) - postpones component's rendering until it is visible
16+
in viewport at least once.

‎docs/Flipflop.md

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# `<Flipflop>`
2+
3+
Similar to [`<Toggle>`](./Toggle.md) but allows to flip the state only once using the `flip` method. Repeated calls to `flip`
4+
will have no effect. To flop the state back again, use `flop` method.
5+
6+
## Usage
7+
8+
```jsx
9+
import {Flipflop} from 'libreact/lib/Flipflop';
10+
11+
<Flipflop>{({on, flip, flop}) =>
12+
<div onClick={flip}>{on ? 'ON' : 'OFF'}</div>
13+
}</Flipflop>
14+
```
15+
16+
## Props
17+
18+
Signature
19+
20+
```ts
21+
interface IFlipflopProps {
22+
init?: boolean;
23+
}
24+
```
25+
26+
, where
27+
28+
- `init` - optional, boolean, initial state of the flipflop.
29+
30+
31+
## `withFlipflop()` HOC
32+
33+
HOC that merges `flipflop` prop into enhanced component's props.
34+
35+
```jsx
36+
import {withFlipflop} from 'libreact/lib/Flipflop';
37+
38+
const MyCompWithFlipflop = withFlipflop(MyComp);
39+
```
40+
41+
You can overwrite the injected prop name
42+
43+
```js
44+
const MyCompWithFlipflop = withFlipflop(MyComp, 'foobar');
45+
```
46+
47+
Or simply merge the whole object into your props
48+
49+
```js
50+
const MyCompWithFlipflop = withFlipflop(MyComp, '');
51+
```
52+
53+
54+
## `@withFlipflop` decorator
55+
56+
React stateful component decorator that adds `flipflop` prop.
57+
58+
```js
59+
import {withFlipflop} from 'libreact/lib/Flipflop';
60+
61+
@withFlipflop
62+
class MyComp extends Component {
63+
64+
}
65+
```
66+
67+
Specify different prop name
68+
69+
```js
70+
@withFlipflop('foobar')
71+
class MyComp extends Component {
72+
73+
}
74+
```
75+
76+
or merge the the whole object into props
77+
78+
```js
79+
@withFlipflop('')
80+
class MyComp extends Component {
81+
82+
}
83+
```

‎docs/FullScreen.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# `<FullScreen>`
2+
3+
Displays child elements full-screen.
4+
5+
## Usage
6+
7+
```jsx
8+
import {FullScreen} from 'libreact/lib/FullScreen';
9+
10+
<FullScreen on={on}>
11+
Hello world!
12+
</FullScreen>
13+
```
14+
15+
## Props
16+
17+
Props have the following signature
18+
19+
```ts
20+
interface IFullScreenProps {
21+
on: boolean;
22+
video?: HTMLVideoElement;
23+
innerRef?: (el) => void;
24+
onClose?: () => void;
25+
tag?: keyof React.ReactHTML;
26+
}
27+
```
28+
29+
, where
30+
31+
- `on` - required, boolean, whether to display element in full screen or inline.
32+
- `video` - optional, DOM video element to try to display that video in full screen using alternative `.webkitEnterFullscreen()`
33+
available only on `HTMLVideoElement`. That way video element will get displayed full screen. Only used when regular full screen
34+
API is not available.
35+
- `innerRef` - optional, callback that receives the root element reference.
36+
- `onClose` - optional, callback, called when full screen is exited.
37+
- `tag` - optional, string, specifying tag name to use for root element, defaults to `div`.

0 commit comments

Comments
 (0)