-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 from MailOnline/feat/various-3
Feat/various 3
- Loading branch information
Showing
120 changed files
with
4,203 additions
and
473 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # CSS Resets | ||
|
|
||
| CSS reset components `<CssReset*>` provide a handy way to include CSS reset in your app. | ||
| You simply need to render the css reset component somewhere in your JSX tree for it to take effect. | ||
|
|
||
| ```jsx | ||
| import CssResetEricMeyer from 'libreact/lib/reset/CssResetEricMeyer'; | ||
|
|
||
| const App = () => | ||
| <div> | ||
| <CssResetEricMeyer /> | ||
| { /* ... */ } | ||
| </div> | ||
| ``` | ||
|
|
||
| When you un-mount a CSS reset component it will also remove the CSS automatically. | ||
|
|
||
| Below is a list of included CSS resets. | ||
|
|
||
| - [`<CssResetEricMeyer>`](./reset/CssResetEricMeyer.md) | ||
| - [`<CssResetEricMeyerCondensed>`](./reset/CssResetEricMeyerCondensed.md) | ||
| - [`<CssResetMinimalistic>`](./reset/CssResetMinimalistic.md) | ||
| - [`<CssResetMinimalistic2>`](./reset/CssResetMinimalistic2.md) | ||
| - [`<CssResetMinimalistic3>`](./reset/CssResetMinimalistic3.md) | ||
| - [`<CssResetPoorMan>`](./reset/CssResetPoorMan.md) | ||
| - [`<CssResetShaunInman>`](./reset/CssResetShaunInman.md) | ||
| - [`<CssResetSiolon>`](./reset/CssResetSiolon.md) | ||
| - [`<CssResetTantek>`](./reset/CssResetTantek.md) | ||
| - [`<CssResetUniversal>`](./reset/CssResetUniversal.md) | ||
| - [`<CssResetYahoo>`](./reset/CssResetYahoo.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| # `<Counter>` | ||
|
|
||
| Allows you to keep a state of a counter value. Is similar to [`<Value>`](./Value.md) but its | ||
| value is cast to `number` and you have an extra `inc(by = 1)` method that will increment your counter. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```jsx | ||
| import {Counter} from 'libreact/lib/Counter'; | ||
|
|
||
| <Counter>{({value, set, inc}) => | ||
| <div onClick={() => inc(2))} onDoubleClick={() => set(0)}> | ||
| {value} | ||
| <div> | ||
| }</Counter> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| Signature | ||
|
|
||
| ```ts | ||
| interface ICounterProps { | ||
| init?: number; | ||
| } | ||
| ``` | ||
|
|
||
| , where | ||
|
|
||
| - `init` - optional, number, default value. | ||
|
|
||
|
|
||
| ## `withCounter()` HOC | ||
|
|
||
| HOC that merges `counter` prop into enhanced component's props. | ||
|
|
||
| ```jsx | ||
| import {withCounter} from 'libreact/lib/Counter'; | ||
|
|
||
| const MyCompWithCounter = withCounter(MyComp); | ||
| ``` | ||
|
|
||
| You can overwrite the injected prop name | ||
|
|
||
| ```js | ||
| const MyCompWithCounter = withCounter(MyComp, 'foobar'); | ||
| ``` | ||
|
|
||
| Or simply merge the whole object into your props | ||
|
|
||
| ```js | ||
| const MyCompWithCounter = withCounter(MyComp, ''); | ||
| ``` | ||
|
|
||
| Set default value | ||
|
|
||
| ```js | ||
| const MyCompWithCounter = withCounter(MyComp, '', -123); | ||
| ``` | ||
|
|
||
|
|
||
|
|
||
| ## `@withCounter` decorator | ||
|
|
||
| React stateful component decorator that adds `counter` prop. | ||
|
|
||
| ```js | ||
| import {withCounter} from 'libreact/lib/Counter'; | ||
|
|
||
| @withCounter | ||
| class MyComp extends Component { | ||
|
|
||
| } | ||
| ``` | ||
|
|
||
| Specify different prop name | ||
|
|
||
| ```js | ||
| @withCounter('foobar') | ||
| class MyComp extends Component { | ||
|
|
||
| } | ||
| ``` | ||
|
|
||
| or merge the the whole object into props | ||
|
|
||
| ```js | ||
| @withCounter('') | ||
| class MyComp extends Component { | ||
|
|
||
| } | ||
| ``` | ||
|
|
||
| set starting value | ||
|
|
||
| ```js | ||
| @withCounter('', 123) | ||
| class MyComp extends Component { | ||
|
|
||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| # Dummies | ||
|
|
||
| Dummies are empty *"shell"* components that don't contain the actual implementation. | ||
|
|
||
| However, those dummies can be used as real React components and they will re-render | ||
| automatically once they get implemented. | ||
|
|
||
| Essentially you can create dummies, which will not add any size to your bundle, use them, | ||
| but implement them with real components only later when necessary. | ||
|
|
||
| - [`mock()`](./mock.md) - dummy that can be implemented using `.implement()` method. | ||
| - [`loadable()`](./loadable.md) - dummy that can be loaded using `.load()` method. | ||
| - [`lazy()`](./lazy.md) - like `loadable()`, but also loads automatically when rendered for the first time. | ||
| - [`delayed()`](./delayed.md) - like `lazy()`, but its loading can be delayed. | ||
| - [`viewport()`](./viewport.md) - postpones component's rendering until it is visible | ||
| in viewport at least once. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| # `<Flipflop>` | ||
|
|
||
| Similar to [`<Toggle>`](./Toggle.md) but allows to flip the state only once using the `flip` method. Repeated calls to `flip` | ||
| will have no effect. To flop the state back again, use `flop` method. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```jsx | ||
| import {Flipflop} from 'libreact/lib/Flipflop'; | ||
|
|
||
| <Flipflop>{({on, flip, flop}) => | ||
| <div onClick={flip}>{on ? 'ON' : 'OFF'}</div> | ||
| }</Flipflop> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| Signature | ||
|
|
||
| ```ts | ||
| interface IFlipflopProps { | ||
| init?: boolean; | ||
| } | ||
| ``` | ||
|
|
||
| , where | ||
|
|
||
| - `init` - optional, boolean, initial state of the flipflop. | ||
|
|
||
|
|
||
| ## `withFlipflop()` HOC | ||
|
|
||
| HOC that merges `flipflop` prop into enhanced component's props. | ||
|
|
||
| ```jsx | ||
| import {withFlipflop} from 'libreact/lib/Flipflop'; | ||
|
|
||
| const MyCompWithFlipflop = withFlipflop(MyComp); | ||
| ``` | ||
|
|
||
| You can overwrite the injected prop name | ||
|
|
||
| ```js | ||
| const MyCompWithFlipflop = withFlipflop(MyComp, 'foobar'); | ||
| ``` | ||
|
|
||
| Or simply merge the whole object into your props | ||
|
|
||
| ```js | ||
| const MyCompWithFlipflop = withFlipflop(MyComp, ''); | ||
| ``` | ||
|
|
||
|
|
||
| ## `@withFlipflop` decorator | ||
|
|
||
| React stateful component decorator that adds `flipflop` prop. | ||
|
|
||
| ```js | ||
| import {withFlipflop} from 'libreact/lib/Flipflop'; | ||
|
|
||
| @withFlipflop | ||
| class MyComp extends Component { | ||
|
|
||
| } | ||
| ``` | ||
|
|
||
| Specify different prop name | ||
|
|
||
| ```js | ||
| @withFlipflop('foobar') | ||
| class MyComp extends Component { | ||
|
|
||
| } | ||
| ``` | ||
|
|
||
| or merge the the whole object into props | ||
|
|
||
| ```js | ||
| @withFlipflop('') | ||
| class MyComp extends Component { | ||
|
|
||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| # `<FullScreen>` | ||
|
|
||
| Displays child elements full-screen. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```jsx | ||
| import {FullScreen} from 'libreact/lib/FullScreen'; | ||
|
|
||
| <FullScreen on={on}> | ||
| Hello world! | ||
| </FullScreen> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| Props have the following signature | ||
|
|
||
| ```ts | ||
| interface IFullScreenProps { | ||
| on: boolean; | ||
| video?: HTMLVideoElement; | ||
| innerRef?: (el) => void; | ||
| onClose?: () => void; | ||
| tag?: keyof React.ReactHTML; | ||
| } | ||
| ``` | ||
|
|
||
| , where | ||
|
|
||
| - `on` - required, boolean, whether to display element in full screen or inline. | ||
| - `video` - optional, DOM video element to try to display that video in full screen using alternative `.webkitEnterFullscreen()` | ||
| available only on `HTMLVideoElement`. That way video element will get displayed full screen. Only used when regular full screen | ||
| API is not available. | ||
| - `innerRef` - optional, callback that receives the root element reference. | ||
| - `onClose` - optional, callback, called when full screen is exited. | ||
| - `tag` - optional, string, specifying tag name to use for root element, defaults to `div`. |
Oops, something went wrong.