From 4192ec72b1dad5e0ef3a4a5310d3087c875cb287 Mon Sep 17 00:00:00 2001 From: Bhargav Ponnapalli Date: Sun, 20 Jan 2019 19:06:03 +0530 Subject: [PATCH] Put readmes back --- packages/website/.gitignore | 3 +- .../website/_readmes/boundingclientrect.md | 77 ++++++++++++ packages/website/_readmes/counter.md | 58 +++++++++ packages/website/_readmes/did-mount.md | 28 +++++ packages/website/_readmes/input.md | 69 +++++++++++ packages/website/_readmes/interval.md | 62 ++++++++++ packages/website/_readmes/key.md | 113 ++++++++++++++++++ packages/website/_readmes/localstorage.md | 30 +++++ packages/website/_readmes/mouse.md | 33 +++++ .../website/_readmes/mutation-observer.md | 76 ++++++++++++ .../website/_readmes/navigator-language.md | 24 ++++ packages/website/_readmes/online.md | 1 + packages/website/_readmes/outside-click.md | 28 +++++ packages/website/_readmes/select.md | 62 ++++++++++ packages/website/_readmes/sessionstorage.md | 28 +++++ packages/website/_readmes/time-ago.md | 48 ++++++++ packages/website/_readmes/timeout.md | 42 +++++++ packages/website/_readmes/toggle.md | 61 ++++++++++ .../website/_readmes/visibility-sensor.md | 85 +++++++++++++ packages/website/_readmes/will-unmount.md | 47 ++++++++ packages/website/_readmes/window-size.md | 48 ++++++++ packages/website/_readmes/worker.md | 43 +++++++ 22 files changed, 1064 insertions(+), 2 deletions(-) create mode 100644 packages/website/_readmes/boundingclientrect.md create mode 100644 packages/website/_readmes/counter.md create mode 100644 packages/website/_readmes/did-mount.md create mode 100644 packages/website/_readmes/input.md create mode 100644 packages/website/_readmes/interval.md create mode 100644 packages/website/_readmes/key.md create mode 100644 packages/website/_readmes/localstorage.md create mode 100644 packages/website/_readmes/mouse.md create mode 100644 packages/website/_readmes/mutation-observer.md create mode 100644 packages/website/_readmes/navigator-language.md create mode 100644 packages/website/_readmes/online.md create mode 100644 packages/website/_readmes/outside-click.md create mode 100644 packages/website/_readmes/select.md create mode 100644 packages/website/_readmes/sessionstorage.md create mode 100644 packages/website/_readmes/time-ago.md create mode 100644 packages/website/_readmes/timeout.md create mode 100644 packages/website/_readmes/toggle.md create mode 100644 packages/website/_readmes/visibility-sensor.md create mode 100644 packages/website/_readmes/will-unmount.md create mode 100644 packages/website/_readmes/window-size.md create mode 100644 packages/website/_readmes/worker.md diff --git a/packages/website/.gitignore b/packages/website/.gitignore index 0966e86ed2..d44cdff0cc 100644 --- a/packages/website/.gitignore +++ b/packages/website/.gitignore @@ -1,3 +1,2 @@ dist -out -_readmes \ No newline at end of file +out \ No newline at end of file diff --git a/packages/website/_readmes/boundingclientrect.md b/packages/website/_readmes/boundingclientrect.md new file mode 100644 index 0000000000..ed45eca671 --- /dev/null +++ b/packages/website/_readmes/boundingclientrect.md @@ -0,0 +1,77 @@ +# @rooks/use-boundingclientrect + +### Installation + +``` +npm install --save @rooks/use-boundingclientrect +``` + +### Usage + +```jsx +function Demo() { + const myRef = useRef(); + const getBoundingClientRect = useBoundingclientrect(myRef); + const [XOffset, setXOffset] = useState(0); + const [YOffset, setYOffset] = useState(300); + const displayString = JSON.stringify(getBoundingClientRect, null, 2); + return ( + <> +
+
+

+ Resize this div as you see fit. To demonstrate that it also updates + on child dom nodes resize +

+
+

Bounds

+

+ + +

+

+ + +

+
+
+ 
{displayString}
+
+ + ); +} + +render() +``` + +### Arguments + +| Argument | Type | Description | +| -------- | --------- | ------------------------------------------------- | +| ref | React ref | React ref whose boundingClientRect is to be found | + +### Return + +| Return value | Type | Description | Default value | +| ------------ | ------- | ---------------------------------------------------------------------------- | ------------- | +| value | DOMRect | DOMRect Object containing x,y, width, height, left,right,top and bottom keys | null | + +Bounding client rect hook for React. diff --git a/packages/website/_readmes/counter.md b/packages/website/_readmes/counter.md new file mode 100644 index 0000000000..21e83f2717 --- /dev/null +++ b/packages/website/_readmes/counter.md @@ -0,0 +1,58 @@ +# @rooks/use-counter + +### Installation + +``` +npm install --save @rooks/use-counter +``` + +### Usage + +```jsx +function CounterComponent() { + const { + value, + increment, + decrement, + incrementBy, + decrementBy, + reset + } = useCounter(3); + + + function incrementBy5(){ + incrementBy(5) + } + function decrementBy7(){ + decrementBy(7) + } + + return <> + Current value is {value} +
+ + + + +
+ + ; +} + +render() +``` + +### Arguments + +| Argument | Type | Description | +| ------------ | ------ | ---------------------------- | +| initialValue | number | Initial value of the counter | + + +### Return + +| Return value | Type | Description | +| ------------ | ------ | --------------------------------------------------------------------------- | +| counter | Object | Object containing {value,increment,decrement,incrementBy,decrementBy,reset} | + +Counter hook for React. diff --git a/packages/website/_readmes/did-mount.md b/packages/website/_readmes/did-mount.md new file mode 100644 index 0000000000..08cd3513a0 --- /dev/null +++ b/packages/website/_readmes/did-mount.md @@ -0,0 +1,28 @@ +# @rooks/use-did-mount + +### Installation + +``` +npm install --save @rooks/use-did-mount +``` + +### Usage + +```jsx +function Demo() { + useDidMount(function(){ + console.log("mounted") + }); + return null +} + +render() +``` + +### Arguments + +| Argument | Type | Description | +| -------- | -------- | ------------------------------ | +| callback | function | function to be called on mount | + +# A React hooks package for componentDidMount. diff --git a/packages/website/_readmes/input.md b/packages/website/_readmes/input.md new file mode 100644 index 0000000000..0c114f0a09 --- /dev/null +++ b/packages/website/_readmes/input.md @@ -0,0 +1,69 @@ +# @rooks/use-input + +### Installation + +``` +npm install --save @rooks/use-input +``` + +### Usage + +**Base** + +```jsx +function Demo() { + const myInput = useInput("hello"); + return ( +
+ +

+ Value is {myInput.value} +

+
+ ); +} + +render() +``` + +**With optional validator** + +```jsx +function Demo() { + const myInput = useInput("hello", { + validate: value => true + }); + return ( +
+ +

+ Value is {myInput.value} +

+
+ ); +} + +render() +``` + +### Arguments + +| Argument | Type | Description | Default value | +| ------------ | ------ | --------------------------- | ------------- | +| initialValue | string | Initial value of the string | "" | +| opts | object | Options | {} | + + +### Options + +| Option key | Type | Description | Default value | +| ---------- | -------- | ---------------------------------------------------------------------------------------------- | ------------- | +| validate | function | Validator function which receives changed valued before update and should return true or false | undefined | + +### Return value + +| Return value | Type | Description | +| ----------------- | ------ | -------------------------------------------------------------------------------------------------------------------- | +| {value, onChange} | Object | Object containing {value : "String", onChange: "function that accepts an event and updates the value of the string"} | + +Input hook for React. diff --git a/packages/website/_readmes/interval.md b/packages/website/_readmes/interval.md new file mode 100644 index 0000000000..9f2d4a2e0b --- /dev/null +++ b/packages/website/_readmes/interval.md @@ -0,0 +1,62 @@ +# @rooks/use-interval + +### Installation + +``` +npm install --save @rooks/use-interval +``` + +### Usage + +```jsx +function reducer(state, action) { + switch (action.type) { + case "increment": + return { count: state.count + 1 }; + default: + return state; + } +} + +function Demo() { + const [value, dispatcher] = useReducer(reducer, { count: 0 }); + + function increment() { + dispatcher({ + type: "increment" + }); + } + + const { start, stop } = useInterval(() => { + increment(); + }, 1000); + + return ( + <> +

value is {value.count}

+ + + + ); +} +render() +``` + +### Arguments + +| Argument | Type | Description | Default value | +| ---------------- | -------- | -------------------------------------------------------- | ------------- | +| callback | function | Function be invoked after each interval duration | undefined | +| intervalDuration | number | Duration in milliseconds after which callback is invoked | undefined | +| startImmediate | boolean | Should the timer start immediately or no | false | + +### Returned Object + +| Returned object attributes | Type | Description | +| -------------------------- | ---------- | -------------------------- | +| start | function | Start the interval | +| stop | function | Stop the interval | +| intervalId | intervalId | IntervalId of the interval | + + +# A react hook for using setInterval. diff --git a/packages/website/_readmes/key.md b/packages/website/_readmes/key.md new file mode 100644 index 0000000000..a8343c6122 --- /dev/null +++ b/packages/website/_readmes/key.md @@ -0,0 +1,113 @@ +# @rooks/use-key + +### Installation + +``` +npm install --save @rooks/use-key +``` + +### Usage + +#### Basic example with keypress + +```jsx +function Demo() { + const inputRef = useRef(); + function windowEnter(e) { + alert("Enter key was pressed on window"); + } + function vowelsEntered(e) { + alert("You typed a vowel"); + } + function capitalVowelsEntered(e) { + alert("You typed a capital vowel"); + } + // window is the target + useKey(["Enter"], windowEnter); + useKey(["a", "e", "i", "o", "u"], vowelsEntered, { + target: inputRef + }); + useKey(["A", "E", "I", "O", "U"], capitalVowelsEntered, { + target: inputRef + }); + return ( + <> +

Press enter anywhere to trigger an alert

+

Press a,e,i,o,u in the input to trigger an alert

+

Press A,E,I,O,U in the input to trigger a different alert alert

+ + + ); +} + +render(); +``` + +#### Multiple kinds of events + +```jsx +function Demo() { + const inputRef = useRef(); + function onKeyInteraction(e) { + console.log("Enter key", e.type); + } + + useKey(["Enter"], onKeyInteraction, { + target: inputRef, + eventTypes: ["keypress", "keydown", "keyup"] + }); + return ( + <> +

Try "Enter" Keypress keydown and keyup

+

+ It will log 3 events on this input. Since you can listen to multiple + types of events on a keyboard key. +

+ + + ); +} +render(); +``` + +#### Conditionally setting handlers + +```jsx +function Demo() { + const inputRef = useRef(); + const [shouldListen, setShouldListen] = useState(false); + function toggleShouldListen() { + setShouldListen(!shouldListen); + } + function onKeyInteraction(e) { + console.log("Enter key", e.type); + } + + useKey(["Enter"], onKeyInteraction, { + target: inputRef, + eventTypes: ["keypress", "keydown", "keyup"], + when: shouldListen + }); + return ( + <> +

+ Enter key events will only be logged when the listening state is true. + Click on the button to toggle between listening and not listening + states.{" "} +

+

+ Handy for adding and removing event handlers only when certain + conditions are met. +

+ +
+ + + ); +} +render(); +``` + +# Keyboard key handler hook for react. diff --git a/packages/website/_readmes/localstorage.md b/packages/website/_readmes/localstorage.md new file mode 100644 index 0000000000..aeaf4013b8 --- /dev/null +++ b/packages/website/_readmes/localstorage.md @@ -0,0 +1,30 @@ +# @rooks/use-localstorage + +Sets and retrieves a key from localStorage and subscribes to it for updates across windows. + +### Installation + +``` +npm install --save @rooks/use-localstorage +``` + +### Usage + +```jsx +function Demo() { + const { value, set, remove } = useLocalstorage("my-value", 0); + return ( +

+ Value is {value}{" "} + + +

+ ); +} + +render(); +``` + +# Local Storage hook for React. diff --git a/packages/website/_readmes/mouse.md b/packages/website/_readmes/mouse.md new file mode 100644 index 0000000000..f7cf1cc637 --- /dev/null +++ b/packages/website/_readmes/mouse.md @@ -0,0 +1,33 @@ +# @rooks/use-mouse + +### Installation + +``` +npm install --save @rooks/use-mouse +``` + +### Usage + +```jsx +function Demo() { + const { x, y } = useMouse(); + return ( + <> +

Move mouse here to see changes to position

+

X position is {x || "null"}

+

X position is {y || "null"}

+ + ); +} + +render() +``` + +### Returned Object + +| Returned object attributes | Type | Description | +| -------------------------- | ---- | ------------------- | +| x | int | X position of mouse | +| y | int | Y position of mouse | + +Mouse hook for React. diff --git a/packages/website/_readmes/mutation-observer.md b/packages/website/_readmes/mutation-observer.md new file mode 100644 index 0000000000..94fd105933 --- /dev/null +++ b/packages/website/_readmes/mutation-observer.md @@ -0,0 +1,76 @@ +# @rooks/use-mutation-observer + +### Installation + +``` +npm install --save @rooks/use-mutation-observer +``` + +### Usage + +```jsx +function Demo() { + const myRef = useRef(); + const [mutationCount, setMutationCount] = useState(0); + const incrementMutationCount = () => { + return setMutationCount(mutationCount + 1); + }; + useMutationObserver(myRef, incrementMutationCount); + const [XOffset, setXOffset] = useState(0); + const [YOffset, setYOffset] = useState(300); + return ( + <> +
+
+

+ Resize this div as you see fit. To demonstrate that it also updates + on child dom nodes resize +

+
+

Bounds

+

+ + +

+

+ + +

+
+
+ 
Mutation count {mutationCount}
+
+ + ); +} + +render() +``` + +### Arguments + +| Argument | Type | Description | Default value | +| -------- | --------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | +| ref | React ref | Ref which should be observed for Mutations | undefined | +| callback | function | Function which should be invoked on mutation. It is called with the `mutationList` and `observer` | undefined | +| config | object | Mutation Observer configuration | {attributes: true,,characterData: true,,subtree: true,,childList: true} | + +Mutation Observer hook for React. diff --git a/packages/website/_readmes/navigator-language.md b/packages/website/_readmes/navigator-language.md new file mode 100644 index 0000000000..cdc13875c2 --- /dev/null +++ b/packages/website/_readmes/navigator-language.md @@ -0,0 +1,24 @@ +# @rooks/use-navigator-language + +### Installation + +``` +npm install --save @rooks/use-navigator-language +``` + +### Usage + +```jsx +function Demo() { + const language = useNavigatorLanguage(); + return

Language is {language}

; +} + +render(); +``` + +### Return value + +A language (String) is returned. + +Navigator Language hook for React. diff --git a/packages/website/_readmes/online.md b/packages/website/_readmes/online.md new file mode 100644 index 0000000000..929c05d723 --- /dev/null +++ b/packages/website/_readmes/online.md @@ -0,0 +1 @@ +404: Not Found diff --git a/packages/website/_readmes/outside-click.md b/packages/website/_readmes/outside-click.md new file mode 100644 index 0000000000..4689da57cc --- /dev/null +++ b/packages/website/_readmes/outside-click.md @@ -0,0 +1,28 @@ +# @rooks/use-outside-click + +### Installation + +``` +npm install --save @rooks/use-outside-click +``` + +### Usage + +```jsx +function Demo() { + const pRef = useRef(); + function outsidePClick() { + alert("Clicked outside p"); + } + useOutsideClick(pRef, outsidePClick); + return ( +
+

Click outside me

+
+ ); +} + +render(); +``` + +# React hook for tracking clicks outside a ref. diff --git a/packages/website/_readmes/select.md b/packages/website/_readmes/select.md new file mode 100644 index 0000000000..a3b7761bd3 --- /dev/null +++ b/packages/website/_readmes/select.md @@ -0,0 +1,62 @@ +# @rooks/use-select + +### Installation + +``` +npm install --save @rooks/use-select +``` + +### Usage + +```jsx + +const list = [ + { + heading: "Tab 1", + content: "Tab 1 Content" + }, + { + heading: "Tab 2", + content: "Tab 2 Content" + } +]; + +function Demo() { + const { index, setIndex, item } = useSelect(list, 0); + return ( +
+ {list.map((listItem, listItemIndex) => ( + + ))} +

{item.content}

+
+ ); +} +render() +``` + +### Arguments + +| Argument | Type | Description | Default value | +| ------------ | ------ | --------------------------------------------- | ------------- | +| list | Array | List of items for which the selection is used | undefined | +| initialIndex | number | Initially selected index | 0 | + +### Returned Object + +| Returned object attributes | Type | Description | +| -------------------------- | -------- | --------------------------------- | +| index | int | Index of currently selected index | +| item | any | Currently selected item | +| setIndex | function | Update selected index | +| setItem | function | Update selected item | + +List Selection hook for React. diff --git a/packages/website/_readmes/sessionstorage.md b/packages/website/_readmes/sessionstorage.md new file mode 100644 index 0000000000..16f24c1bba --- /dev/null +++ b/packages/website/_readmes/sessionstorage.md @@ -0,0 +1,28 @@ +# @rooks/use-sessionstorage + +### Installation + +``` +npm install --save @rooks/use-sessionstorage +``` + +### Usage + +```jsx +function Demo() { + const { value, set, remove } = useSessionStorage("my-value", 0); + return ( +

+ Value is {value}{" "} + + +

+ ); +} + +render(); +``` + +# Session storage react hook. Easily manage session storage values. diff --git a/packages/website/_readmes/time-ago.md b/packages/website/_readmes/time-ago.md new file mode 100644 index 0000000000..9baf302b73 --- /dev/null +++ b/packages/website/_readmes/time-ago.md @@ -0,0 +1,48 @@ +# @rooks/use-time-ago + +### Installation + +``` +npm install --save @rooks/use-time-ago +``` + +### Usage + +```jsx +function Demo() { + const [date, setDate] = useState(new Date()); + const timeAgo = useTimeAgo(date.getTime() - 1000 * 12, { + locale: "zh_CN" + }); + const timeAgo2 = useTimeAgo(date.getTime() - 1000 * 12); + return ( + <> +

{timeAgo}

+

{timeAgo2}

+ + ); +} + +render() +``` + +### Arguments + +| Argument | Type | Description | Default value | +| -------- | ------ | -------------- | ------------------ | +| input | Date | Timestamp | etc | Any input that time-ago.js supports | undefined | +| options | Object | Options object | { intervalMs:0 } | + +#### Options + +| Options | Type | Description | Default value | +| ------------ | ------------ | ---------------------------------------------------------------------- | ------------- | +| intervalMs | milliseconds | Duration after which time-ago has to be calculated | 1000 | +| locale | String | Locale in which value is expected | undefined | +| relativeDate | Date | Relative date object with respect to which time-ago is to be calcuated | Current Time | + +### Returned Value + +Timeago string is returned. + +# A React Hook to get time ago for timestamp millisecond value. diff --git a/packages/website/_readmes/timeout.md b/packages/website/_readmes/timeout.md new file mode 100644 index 0000000000..dfa5ffc913 --- /dev/null +++ b/packages/website/_readmes/timeout.md @@ -0,0 +1,42 @@ +# @rooks/use-timeout + +### Installation + +``` +npm install --save @rooks/use-timeout +``` + +### Usage + +```jsx +function TimeoutComponent() { + function doAlert() { + window.alert("timeout expired!"); + } + const { start, clear } = useTimeout(doAlert, 2000); + return ( + <> + + + + ); +} + +render() +``` + +### Arguments + +| Arguments | Type | Description | Default value | +| --------- | -------- | -------------------------------------------------------- | ------------- | +| callback | function | Function to be executed in timeout | undefind | +| delay | Number | Number in milliseconds after which callback is to be run | 0 | + +### Returned Object keys + +| Returned object attributes | Type | Description | +| -------------------------- | -------- | ----------------- | +| clear | function | Clear the timeout | +| start | function | Start the timeout | + +Timeout hook for React. diff --git a/packages/website/_readmes/toggle.md b/packages/website/_readmes/toggle.md new file mode 100644 index 0000000000..41e7baec92 --- /dev/null +++ b/packages/website/_readmes/toggle.md @@ -0,0 +1,61 @@ +# @rooks/use-toggle + +### Installation + +``` +npm install --save @rooks/use-toggle +``` + +### Usage + +```jsx + +const customToggleFunction = v => (v === "start" ? "stop" : "start"); + +function Demo() { + const { value: value1, toggleValue: toggleValue1 } = useToggle(); + const { value: value2, toggleValue: toggleValue2 } = useToggle(true); + const { value: value3, toggleValue: toggleValue3 } = useToggle( + "start", + customToggleFunction + ); + + return ( + <> +
+

Base

+ +
+
+
+

Initial true

+ +
+
+
+

Custom values

+ +
+ + ); +} + +render() +``` + +### Arguments + +| Arguments | Type | Description | Default value | +| -------------- | -------- | ----------------------------------------------- | ------------- | +| initialValue | boolean | Initial value of the state | false | +| toggleFunction | function | Function which determines how to toggle a value | v => !v | + + +### Returned object keys + +| Returned object attributes | Type | Description | +| -------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------- | +| value | Any | Current value | +| toggleValue | function | Toggle function which changes the value to the other value in the list of 2 acceptable values. (Mostly true or false) | + +Toggle hook for React. diff --git a/packages/website/_readmes/visibility-sensor.md b/packages/website/_readmes/visibility-sensor.md new file mode 100644 index 0000000000..fb9859d867 --- /dev/null +++ b/packages/website/_readmes/visibility-sensor.md @@ -0,0 +1,85 @@ +# @rooks/use-visibility-sensor + +Visibility sensor hook for React. + +### Installation + +``` +npm install --save @rooks/use-visibility-sensor +``` + +### Usage + +```jsx + +function Demo() { + const rootNode = useRef(null); + const { isVisible, visibilityRect } = useVisibilitySensor(rootNode, { + intervalCheck: false, + scrollCheck: true, + resizeCheck: true + }); + return ( +
+

+ {isVisible ? "Visible" : isVisible === null ? "Null" : "Not Visible"} +

+
+ ); +} + +render() +``` + +It checks whether an element has scrolled into view or not. A lot of the logic is taken from [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor) and is rewritten for the hooks proposal. + +> **Note:** This is using the new [React Hooks API Proposal](https://reactjs.org/docs/hooks-intro.html) +> which is subject to change until React 16.7 final. +> +> You'll need to install `react`, `react-dom`, etc at `^16.7.0-alpha.0` + +## Demo + +[![Image from Gyazo](https://i.gyazo.com/98634bb2a962733670d798d1e754d63e.gif)](https://gyazo.com/98634bb2a962733670d798d1e754d63e) + +### Returned Object keys + +| Returned object attributes | Type | Description | +| -------------------------- | ------- | ----------------------------------------------------------- | +| isVisible | Boolean | Is Ref visible or not | +| visibilityRect | Object | VisibilityRectangle containing coordinates of the container | + +## Options + +The first argument of the `useVisibilitySensor` hook is a ref, the second argument is an options object. The available options are as follow: + +`intervalCheck: false` - Accepts `int | bool`, if an `int` is supplied, that will be the interval in `ms` and it keeps checking for visibility + +`partialVisibility: false` - Accepts `bool | string` : Tells the hook if partial visibility should be considered as visibility or not. Accepts `false` and directions `top`, `bottom`, `left` and `right` +`containment: null` - A `DOMNode` element which defaults to `window`. The element relative to which visibility is checked against + +`scrollCheck: true` - A `bool` to determine whether to check for scroll behavior or not + +`scrollDebounce: 250` - The debounce ms for scroll + +`scrollThrottle: -1` - The throttle ms for scroll. If throttle > -1, debounce is ignored. + +`resizeCheck: false` - A `bool` to determine whether to check for resize behavior or not + +`resizeDebounce: 250` - The debounce ms for resize + +`resizeThrottle: -1` - The throttle ms for resize. If throttle > -1, debounce is ignored. + +`shouldCheckOnMount: true` - A `bool` which determines whether an initial check on first render should happen or not. + +`minTopValue: 0` - An `int` top value to determine what amount of top visibility should be considered for `visibility` + +## Todo + +- [x] Init +- [x] Scroll and Resize support +- [x] Debounce and throttling +- [x] Option to opt-out of initial check on mount +- [x] Documentation of all options +- [x] Tests _ WIP _ +- [ ] More examples _ WIP _ diff --git a/packages/website/_readmes/will-unmount.md b/packages/website/_readmes/will-unmount.md new file mode 100644 index 0000000000..c1a0fdce56 --- /dev/null +++ b/packages/website/_readmes/will-unmount.md @@ -0,0 +1,47 @@ +# @rooks/use-will-unmount + +### Installation + +``` +npm install --save @rooks/use-will-unmount +``` + +### Usage + +```jsx + +function Message(){ + + useWillUnmount(function () { + alert("unmounted") + }) + return

Message

+} + + +function Demo() { + const [ + value, + changeValue + ] = useState(true); + + function toggleValue(){ + changeValue(!value) + } + + return <> +

+ {value && } + ; +} + +render() +``` + +### Arguments + +| Arguments | Type | Description | Default value | +| --------- | -------- | ----------------------------------------------- | ------------- | +| callback | function | Callback function which needs to run on unmount | undefined | + +# A React hook for componentWillUnmount lifecycle method. diff --git a/packages/website/_readmes/window-size.md b/packages/website/_readmes/window-size.md new file mode 100644 index 0000000000..c63239a1a7 --- /dev/null +++ b/packages/website/_readmes/window-size.md @@ -0,0 +1,48 @@ +# @rooks/use-window-size + +### Installation + +``` +npm install --save @rooks/use-window-size +``` + +### Usage + +```jsx +function WindowComponent() { + const { innerWidth, innerHeight, outerHeight, outerWidth } = useWindowSize(); + + return ( +
+

+ innerHeight - + {innerHeight} +

+

+ innerWidth - + {innerWidth} +

+

+ outerHeight - + {outerHeight} +

+

+ outerWidth - + {outerWidth} +

+
+ ); +} +render() +``` + +### Returned Object keys + +| Returned object attributes | Type | Description | +| -------------------------- | ---- | ---------------------- | +| width | int | inner width of window | +| height | int | inner height of window | +| outerWidth | int | outer height of window | +| outerHeight | int | outer width of window | + +Window size hook for React. diff --git a/packages/website/_readmes/worker.md b/packages/website/_readmes/worker.md new file mode 100644 index 0000000000..a26b1389bf --- /dev/null +++ b/packages/website/_readmes/worker.md @@ -0,0 +1,43 @@ +# @rooks/use-worker + +### Installation + +``` +npm install --save @rooks/use-worker +``` + +```react + +function Demo() { + const [value, setValue] = useState(0); + const [error, setError] = useState(null); + const worker = useWorker("/worker.js", { + onMessage: e => { + console.log("message received from worker"); + console.log(e.data); + setValue(e.data); + }, + onMessageError: e => { + console.log(e); + } + }); + return value; +} + +const rootElement = document.getElementById("root"); + +ReactDOM.render(, rootElement); +``` + +### Arguments + +| Arguments | Type | Description | Default value | +| ---------- | ------ | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | +| scriptPath | string | Path to the script file that a new Worker is to be created with | undefined | +| options | Object | Options object within which `onMessage` and `onMessageError` options can be passed to communicate with the worker | `{onMessage: () => {},,onMessageError: () => {}}` | + +### Returned Object + +The worker instance is returned. + +### Worker hook for React. \ No newline at end of file