From d9f78c0d20667298260c885b07d94e4ec123f35a Mon Sep 17 00:00:00 2001 From: Bhargav Ponnapalli Date: Sun, 20 Jan 2019 18:46:41 +0530 Subject: [PATCH] Updates --- README.md | 60 ++++------ package.json | 25 +--- packages/tools/README.md | 13 -- packages/tools/__tests__/tools.test.js | 7 -- packages/tools/package.json | 58 --------- packages/website/{src => }/.babelrc | 0 packages/website/{src => }/.eslintrc | 0 packages/website/.gitignore | 3 + packages/website/{src => }/.npmignore | 0 packages/website/{src => }/README.md | 0 .../website/{src => }/actions/getReadme.js | 0 .../website/{src => }/components/CodeBlock.js | 0 .../website/{src => }/components/Headings.js | 0 .../website/{src => }/components/LiveEdit.js | 0 packages/website/{src => }/components/Note.js | 0 .../website/{src => }/components/Table.js | 0 .../{src => }/components/common/Layout.js | 0 .../{src => }/components/scope-with-hook.js | 0 .../{src => }/hooks/boundingclientrect.js | 0 packages/website/{src => }/hooks/counter.js | 0 packages/website/{src => }/hooks/did-mount.js | 0 packages/website/{src => }/hooks/input.js | 0 packages/website/{src => }/hooks/interval.js | 0 packages/website/{src => }/hooks/key.js | 0 .../website/{src => }/hooks/localstorage.js | 0 packages/website/{src => }/hooks/mouse.js | 0 .../{src => }/hooks/mutation-observer.js | 0 .../{src => }/hooks/navigator-language.js | 0 packages/website/{src => }/hooks/online.js | 0 .../website/{src => }/hooks/outside-click.js | 0 packages/website/{src => }/hooks/select.js | 0 .../website/{src => }/hooks/sessionstorage.js | 0 packages/website/{src => }/hooks/time-ago.js | 0 packages/website/{src => }/hooks/timeout.js | 0 packages/website/{src => }/hooks/toggle.js | 0 .../{src => }/hooks/visibility-sensor.js | 0 .../website/{src => }/hooks/will-unmount.js | 0 .../website/{src => }/hooks/window-size.js | 0 packages/website/{src => }/hooks/worker.js | 0 packages/website/{src => }/next.config.js | 0 packages/website/now.json | 4 +- packages/website/package.json | 35 +++++- packages/website/{src => }/pages/_app.js | 0 packages/website/{src => }/pages/_document.js | 0 packages/website/{src => }/pages/hook.js | 0 packages/website/{src => }/pages/index.js | 0 packages/website/scripts/update-deps.js | 14 +-- packages/website/{src => }/server.js | 0 packages/website/src/.gitignore | 2 - .../src/_readmes/boundingclientrect.md | 77 ------------ packages/website/src/_readmes/counter.md | 58 --------- packages/website/src/_readmes/did-mount.md | 28 ----- packages/website/src/_readmes/input.md | 69 ----------- packages/website/src/_readmes/interval.md | 62 ---------- packages/website/src/_readmes/key.md | 113 ------------------ packages/website/src/_readmes/localstorage.md | 30 ----- packages/website/src/_readmes/mouse.md | 33 ----- .../website/src/_readmes/mutation-observer.md | 76 ------------ .../src/_readmes/navigator-language.md | 24 ---- packages/website/src/_readmes/online.md | 1 - .../website/src/_readmes/outside-click.md | 28 ----- packages/website/src/_readmes/select.md | 62 ---------- .../website/src/_readmes/sessionstorage.md | 28 ----- packages/website/src/_readmes/time-ago.md | 48 -------- packages/website/src/_readmes/timeout.md | 42 ------- packages/website/src/_readmes/toggle.md | 61 ---------- .../website/src/_readmes/visibility-sensor.md | 85 ------------- packages/website/src/_readmes/will-unmount.md | 47 -------- packages/website/src/_readmes/window-size.md | 48 -------- packages/website/src/_readmes/worker.md | 43 ------- packages/website/src/package.json | 4 +- packages/website/{src => }/static/logo.png | Bin packages/website/{src => }/test/index.spec.js | 0 packages/website/{src => }/utils/contexts.js | 0 .../website/{src => }/utils/getAllHooks.js | 0 .../website/{src => }/utils/getHookMap.js | 0 .../website/{src => }/utils/getNpmBlob.js | 0 .../website/{src => }/utils/getReadmeMap.js | 0 .../website/{src => }/utils/mdx-components.js | 0 .../{src => }/utils/prismTemplateString.js | 0 packages/website/{src => }/yarn.lock | 0 yarn.lock | 28 ++--- 82 files changed, 88 insertions(+), 1228 deletions(-) delete mode 100644 packages/tools/README.md delete mode 100644 packages/tools/__tests__/tools.test.js delete mode 100644 packages/tools/package.json rename packages/website/{src => }/.babelrc (100%) rename packages/website/{src => }/.eslintrc (100%) create mode 100644 packages/website/.gitignore rename packages/website/{src => }/.npmignore (100%) rename packages/website/{src => }/README.md (100%) rename packages/website/{src => }/actions/getReadme.js (100%) rename packages/website/{src => }/components/CodeBlock.js (100%) rename packages/website/{src => }/components/Headings.js (100%) rename packages/website/{src => }/components/LiveEdit.js (100%) rename packages/website/{src => }/components/Note.js (100%) rename packages/website/{src => }/components/Table.js (100%) rename packages/website/{src => }/components/common/Layout.js (100%) rename packages/website/{src => }/components/scope-with-hook.js (100%) rename packages/website/{src => }/hooks/boundingclientrect.js (100%) rename packages/website/{src => }/hooks/counter.js (100%) rename packages/website/{src => }/hooks/did-mount.js (100%) rename packages/website/{src => }/hooks/input.js (100%) rename packages/website/{src => }/hooks/interval.js (100%) rename packages/website/{src => }/hooks/key.js (100%) rename packages/website/{src => }/hooks/localstorage.js (100%) rename packages/website/{src => }/hooks/mouse.js (100%) rename packages/website/{src => }/hooks/mutation-observer.js (100%) rename packages/website/{src => }/hooks/navigator-language.js (100%) rename packages/website/{src => }/hooks/online.js (100%) rename packages/website/{src => }/hooks/outside-click.js (100%) rename packages/website/{src => }/hooks/select.js (100%) rename packages/website/{src => }/hooks/sessionstorage.js (100%) rename packages/website/{src => }/hooks/time-ago.js (100%) rename packages/website/{src => }/hooks/timeout.js (100%) rename packages/website/{src => }/hooks/toggle.js (100%) rename packages/website/{src => }/hooks/visibility-sensor.js (100%) rename packages/website/{src => }/hooks/will-unmount.js (100%) rename packages/website/{src => }/hooks/window-size.js (100%) rename packages/website/{src => }/hooks/worker.js (100%) rename packages/website/{src => }/next.config.js (100%) rename packages/website/{src => }/pages/_app.js (100%) rename packages/website/{src => }/pages/_document.js (100%) rename packages/website/{src => }/pages/hook.js (100%) rename packages/website/{src => }/pages/index.js (100%) rename packages/website/{src => }/server.js (100%) delete mode 100644 packages/website/src/.gitignore delete mode 100644 packages/website/src/_readmes/boundingclientrect.md delete mode 100644 packages/website/src/_readmes/counter.md delete mode 100644 packages/website/src/_readmes/did-mount.md delete mode 100644 packages/website/src/_readmes/input.md delete mode 100644 packages/website/src/_readmes/interval.md delete mode 100644 packages/website/src/_readmes/key.md delete mode 100644 packages/website/src/_readmes/localstorage.md delete mode 100644 packages/website/src/_readmes/mouse.md delete mode 100644 packages/website/src/_readmes/mutation-observer.md delete mode 100644 packages/website/src/_readmes/navigator-language.md delete mode 100644 packages/website/src/_readmes/online.md delete mode 100644 packages/website/src/_readmes/outside-click.md delete mode 100644 packages/website/src/_readmes/select.md delete mode 100644 packages/website/src/_readmes/sessionstorage.md delete mode 100644 packages/website/src/_readmes/time-ago.md delete mode 100644 packages/website/src/_readmes/timeout.md delete mode 100644 packages/website/src/_readmes/toggle.md delete mode 100644 packages/website/src/_readmes/visibility-sensor.md delete mode 100644 packages/website/src/_readmes/will-unmount.md delete mode 100644 packages/website/src/_readmes/window-size.md delete mode 100644 packages/website/src/_readmes/worker.md rename packages/website/{src => }/static/logo.png (100%) rename packages/website/{src => }/test/index.spec.js (100%) rename packages/website/{src => }/utils/contexts.js (100%) rename packages/website/{src => }/utils/getAllHooks.js (100%) rename packages/website/{src => }/utils/getHookMap.js (100%) rename packages/website/{src => }/utils/getNpmBlob.js (100%) rename packages/website/{src => }/utils/getReadmeMap.js (100%) rename packages/website/{src => }/utils/mdx-components.js (100%) rename packages/website/{src => }/utils/prismTemplateString.js (100%) rename packages/website/{src => }/yarn.lock (100%) diff --git a/README.md b/README.md index 291fa8c896..583f7a302c 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ render() | ------------ | ------- | ---------------------------------------------------------------------------- | ------------- | | value | DOMRect | DOMRect Object containing x,y, width, height, left,right,top and bottom keys | null | -Bounding client rect hook for React +Bounding client rect hook for React. # @rooks/use-counter ### Installation @@ -149,7 +149,7 @@ render() | ------------ | ------ | --------------------------------------------------------------------------- | | counter | Object | Object containing {value,increment,decrement,incrementBy,decrementBy,reset} | -Counter hook for React +Counter hook for React. # @rooks/use-did-mount ### Installation @@ -177,7 +177,7 @@ render() | -------- | -------- | ------------------------------ | | callback | function | function to be called on mount | -# A React hooks package for componentDidMount +# A React hooks package for componentDidMount. # @rooks/use-input ### Installation @@ -246,7 +246,7 @@ render() | ----------------- | ------ | -------------------------------------------------------------------------------------------------------------------- | | {value, onChange} | Object | Object containing {value : "String", onChange: "function that accepts an event and updates the value of the string"} | -Input hook for React +Input hook for React. # @rooks/use-interval ### Installation @@ -308,7 +308,7 @@ render() | intervalId | intervalId | IntervalId of the interval | -# A react hook for using setInterval +# A react hook for using setInterval. # @rooks/use-key ### Installation @@ -421,7 +421,7 @@ function Demo() { render(); ``` -# Keyboard key handler hook for react +# Keyboard key handler hook for react. # @rooks/use-localstorage Sets and retrieves a key from localStorage and subscribes to it for updates across windows. @@ -451,7 +451,7 @@ function Demo() { render(); ``` -# Local Storage hook for React +# Local Storage hook for React. # @rooks/use-mouse ### Installation @@ -484,7 +484,7 @@ render() | x | int | X position of mouse | | y | int | Y position of mouse | -Mouse hook for React +Mouse hook for React. # @rooks/use-mutation-observer ### Installation @@ -560,7 +560,7 @@ render() | 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 +Mutation Observer hook for React. # @rooks/use-navigator-language ### Installation @@ -573,18 +573,18 @@ npm install --save @rooks/use-navigator-language ```jsx function Demo() { - const language = useNavigatorLanguage(); + const language = useNavigatorLanguage(); return

Language is {language}

; } -render() +render(); ``` ### Return value A language (String) is returned. -Navigator Language hook for React +Navigator Language hook for React. # @rooks/use-online ### Installation @@ -601,14 +601,14 @@ function Demo() { return

Online status - {isOnline.toString()}

; } -render() +render(); ``` ### Return value Offline status (boolean) is returned. -Online Status hook for React +Online Status hook for React. # @rooks/use-outside-click ### Installation @@ -636,7 +636,7 @@ function Demo() { render(); ``` -# React hook for tracking clicks outside a ref +# React hook for tracking clicks outside a ref. # @rooks/use-select ### Installation @@ -698,7 +698,7 @@ render() | setIndex | function | Update selected index | | setItem | function | Update selected item | -List Selection hook for React +List Selection hook for React. # @rooks/use-sessionstorage ### Installation @@ -726,7 +726,7 @@ function Demo() { render(); ``` -# Session storage react hook. Easily manage session storage values +# Session storage react hook. Easily manage session storage values. # @rooks/use-time-ago ### Installation @@ -774,7 +774,7 @@ render() Timeago string is returned. -# A React Hook to get time ago for timestamp millisecond value +# A React Hook to get time ago for timestamp millisecond value. # @rooks/use-timeout ### Installation @@ -816,7 +816,7 @@ render() | clear | function | Clear the timeout | | start | function | Start the timeout | -Timeout hook for React +Timeout hook for React. # @rooks/use-toggle ### Installation @@ -877,21 +877,10 @@ render() | 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 -# `tools` - -> TODO: description - -## Usage - -``` -const tools = require('tools'); - -// TODO: DEMONSTRATE API -``` +Toggle hook for React. # @rooks/use-visibility-sensor -Visibility sensor hook for React +Visibility sensor hook for React. ### Installation @@ -974,6 +963,7 @@ The first argument of the `useVisibilitySensor` hook is a ref, the second argume - [x] Documentation of all options - [x] Tests _ WIP _ - [ ] More examples _ WIP _ +# Rooks website # @rooks/use-will-unmount ### Installation @@ -1020,7 +1010,7 @@ render() | --------- | -------- | ----------------------------------------------- | ------------- | | callback | function | Callback function which needs to run on unmount | undefined | -# A React hook for componentWillUnmount lifecycle method +# A React hook for componentWillUnmount lifecycle method. # @rooks/use-window-size ### Installation @@ -1068,7 +1058,7 @@ render() | outerWidth | int | outer height of window | | outerHeight | int | outer width of window | -Window size hook for React +Window size hook for React. # @rooks/use-worker ### Installation @@ -1111,4 +1101,4 @@ ReactDOM.render(, rootElement); The worker instance is returned. -### Worker hook for React \ No newline at end of file +### Worker hook for React. \ No newline at end of file diff --git a/package.json b/package.json index b824061a4a..cdcd8af24d 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,9 @@ "private": true, "description": "React hooks.", "scripts": { - "dev": "cd packages/website && npm run dev", - "deploy": "cd packages/website && npm run deploy", + "clean": "lerna clean", + "dev": "cd packages/website && yarn dev", + "deploy": "cd packages/website && yarn deploy", "predeploy": "node helpers/update_readme", "prepare:deploy": "cd packages/website/src && yarn", "create": "node helpers/create", @@ -15,14 +16,11 @@ "release": "lerna publish" }, "devDependencies": { + "@rooks/use-select": "0.1.0", "@babel/cli": "^7.1.5", "@babel/core": "^7.1.5", "@babel/preset-env": "^7.1.5", "@babel/preset-react": "^7.0.0", - "@fortawesome/fontawesome-svg-core": "1.2.8", - "@fortawesome/free-solid-svg-icons": "5.5.0", - "@fortawesome/react-fontawesome": "0.1.3", - "@rooks/use-select": "0.1.0", "@types/react": "16.7.18", "@types/react-dom": "16.0.11", "babel-core": "^7.0.0-bridge.0", @@ -37,26 +35,13 @@ "meow": "5.0.0", "ora": "3.0.0", "raf": "3.4.1", - "react": "16.7.0-alpha.2", - "react-dom": "16.7.0-alpha.2", "react-testing-library": "^5.2.3", "read-pkg-up": "4.0.0", "replace-string": "2.0.0", "shelljs": "0.8.3", "write-pkg": "3.2.0" }, - "dependencies": { - "@fortawesome/fontawesome-svg-core": "1.2.8", - "@fortawesome/free-solid-svg-icons": "5.5.0", - "@fortawesome/react-fontawesome": "0.1.3", - "@rooks/use-select": "0.1.0", - "chalk": "2.4.1", - "inquirer": "6.2.0", - "make-dir": "1.3.0", - "ora": "3.0.0", - "replace-string": "2.0.0", - "shelljs": "0.8.3" - }, + "dependencies": {}, "workspaces": [ "packages/*" ] diff --git a/packages/tools/README.md b/packages/tools/README.md deleted file mode 100644 index bd0b5ae4b3..0000000000 --- a/packages/tools/README.md +++ /dev/null @@ -1,13 +0,0 @@ -# `tools` - -> TODO: description - -## Usage - -``` -const tools = require('tools'); - -// TODO: DEMONSTRATE API -``` - -Tools diff --git a/packages/tools/__tests__/tools.test.js b/packages/tools/__tests__/tools.test.js deleted file mode 100644 index bd6cfa1fce..0000000000 --- a/packages/tools/__tests__/tools.test.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -const tools = require('..'); - -describe('tools', () => { - it('needs tests'); -}); diff --git a/packages/tools/package.json b/packages/tools/package.json deleted file mode 100644 index 08359ee4af..0000000000 --- a/packages/tools/package.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "name": "tools", - "version": "1.0.5", - "description": "Tools", - "author": "Bhargav Ponnapalli (https://github.com/imbhargav5)", - "homepage": "https://github.com/react-hooks-org/rooks#readme", - "license": "MIT", - "main": "lib/tools.js", - "directories": { - "lib": "lib", - "test": "__tests__" - }, - "files": [ - "lib" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/react-hooks-org/rooks.git" - }, - "scripts": { - "build": "echo \"build\"" - }, - "bugs": { - "url": "https://github.com/react-hooks-org/rooks/issues" - }, - "dependencies": { - "@babel/cli": "^7.1.5", - "@babel/core": "^7.1.5", - "@babel/preset-env": "^7.1.5", - "@babel/preset-react": "^7.0.0", - "@fortawesome/fontawesome-svg-core": "1.2.8", - "@fortawesome/free-solid-svg-icons": "5.5.0", - "@fortawesome/react-fontawesome": "0.1.3", - "@rooks/use-select": "0.1.0", - "@types/react": "16.7.18", - "@types/react-dom": "16.0.11", - "babel-core": "^7.0.0-bridge.0", - "babel-jest": "^23.6.0", - "babel-plugin-prismjs": "1.0.2", - "browser-env": "3.2.5", - "chalk": "2.4.1", - "inquirer": "6.2.0", - "jest": "^23.6.0", - "lerna": "^3.4.3", - "make-dir": "1.3.0", - "meow": "5.0.0", - "ora": "3.0.0", - "raf": "3.4.1", - "react": "16.7.0-alpha.2", - "react-dom": "16.7.0-alpha.2", - "react-testing-library": "^5.2.3", - "read-pkg-up": "4.0.0", - "replace-string": "2.0.0", - "shelljs": "0.8.3", - "write-pkg": "3.2.0" - }, - "private": true -} diff --git a/packages/website/src/.babelrc b/packages/website/.babelrc similarity index 100% rename from packages/website/src/.babelrc rename to packages/website/.babelrc diff --git a/packages/website/src/.eslintrc b/packages/website/.eslintrc similarity index 100% rename from packages/website/src/.eslintrc rename to packages/website/.eslintrc diff --git a/packages/website/.gitignore b/packages/website/.gitignore new file mode 100644 index 0000000000..0966e86ed2 --- /dev/null +++ b/packages/website/.gitignore @@ -0,0 +1,3 @@ +dist +out +_readmes \ No newline at end of file diff --git a/packages/website/src/.npmignore b/packages/website/.npmignore similarity index 100% rename from packages/website/src/.npmignore rename to packages/website/.npmignore diff --git a/packages/website/src/README.md b/packages/website/README.md similarity index 100% rename from packages/website/src/README.md rename to packages/website/README.md diff --git a/packages/website/src/actions/getReadme.js b/packages/website/actions/getReadme.js similarity index 100% rename from packages/website/src/actions/getReadme.js rename to packages/website/actions/getReadme.js diff --git a/packages/website/src/components/CodeBlock.js b/packages/website/components/CodeBlock.js similarity index 100% rename from packages/website/src/components/CodeBlock.js rename to packages/website/components/CodeBlock.js diff --git a/packages/website/src/components/Headings.js b/packages/website/components/Headings.js similarity index 100% rename from packages/website/src/components/Headings.js rename to packages/website/components/Headings.js diff --git a/packages/website/src/components/LiveEdit.js b/packages/website/components/LiveEdit.js similarity index 100% rename from packages/website/src/components/LiveEdit.js rename to packages/website/components/LiveEdit.js diff --git a/packages/website/src/components/Note.js b/packages/website/components/Note.js similarity index 100% rename from packages/website/src/components/Note.js rename to packages/website/components/Note.js diff --git a/packages/website/src/components/Table.js b/packages/website/components/Table.js similarity index 100% rename from packages/website/src/components/Table.js rename to packages/website/components/Table.js diff --git a/packages/website/src/components/common/Layout.js b/packages/website/components/common/Layout.js similarity index 100% rename from packages/website/src/components/common/Layout.js rename to packages/website/components/common/Layout.js diff --git a/packages/website/src/components/scope-with-hook.js b/packages/website/components/scope-with-hook.js similarity index 100% rename from packages/website/src/components/scope-with-hook.js rename to packages/website/components/scope-with-hook.js diff --git a/packages/website/src/hooks/boundingclientrect.js b/packages/website/hooks/boundingclientrect.js similarity index 100% rename from packages/website/src/hooks/boundingclientrect.js rename to packages/website/hooks/boundingclientrect.js diff --git a/packages/website/src/hooks/counter.js b/packages/website/hooks/counter.js similarity index 100% rename from packages/website/src/hooks/counter.js rename to packages/website/hooks/counter.js diff --git a/packages/website/src/hooks/did-mount.js b/packages/website/hooks/did-mount.js similarity index 100% rename from packages/website/src/hooks/did-mount.js rename to packages/website/hooks/did-mount.js diff --git a/packages/website/src/hooks/input.js b/packages/website/hooks/input.js similarity index 100% rename from packages/website/src/hooks/input.js rename to packages/website/hooks/input.js diff --git a/packages/website/src/hooks/interval.js b/packages/website/hooks/interval.js similarity index 100% rename from packages/website/src/hooks/interval.js rename to packages/website/hooks/interval.js diff --git a/packages/website/src/hooks/key.js b/packages/website/hooks/key.js similarity index 100% rename from packages/website/src/hooks/key.js rename to packages/website/hooks/key.js diff --git a/packages/website/src/hooks/localstorage.js b/packages/website/hooks/localstorage.js similarity index 100% rename from packages/website/src/hooks/localstorage.js rename to packages/website/hooks/localstorage.js diff --git a/packages/website/src/hooks/mouse.js b/packages/website/hooks/mouse.js similarity index 100% rename from packages/website/src/hooks/mouse.js rename to packages/website/hooks/mouse.js diff --git a/packages/website/src/hooks/mutation-observer.js b/packages/website/hooks/mutation-observer.js similarity index 100% rename from packages/website/src/hooks/mutation-observer.js rename to packages/website/hooks/mutation-observer.js diff --git a/packages/website/src/hooks/navigator-language.js b/packages/website/hooks/navigator-language.js similarity index 100% rename from packages/website/src/hooks/navigator-language.js rename to packages/website/hooks/navigator-language.js diff --git a/packages/website/src/hooks/online.js b/packages/website/hooks/online.js similarity index 100% rename from packages/website/src/hooks/online.js rename to packages/website/hooks/online.js diff --git a/packages/website/src/hooks/outside-click.js b/packages/website/hooks/outside-click.js similarity index 100% rename from packages/website/src/hooks/outside-click.js rename to packages/website/hooks/outside-click.js diff --git a/packages/website/src/hooks/select.js b/packages/website/hooks/select.js similarity index 100% rename from packages/website/src/hooks/select.js rename to packages/website/hooks/select.js diff --git a/packages/website/src/hooks/sessionstorage.js b/packages/website/hooks/sessionstorage.js similarity index 100% rename from packages/website/src/hooks/sessionstorage.js rename to packages/website/hooks/sessionstorage.js diff --git a/packages/website/src/hooks/time-ago.js b/packages/website/hooks/time-ago.js similarity index 100% rename from packages/website/src/hooks/time-ago.js rename to packages/website/hooks/time-ago.js diff --git a/packages/website/src/hooks/timeout.js b/packages/website/hooks/timeout.js similarity index 100% rename from packages/website/src/hooks/timeout.js rename to packages/website/hooks/timeout.js diff --git a/packages/website/src/hooks/toggle.js b/packages/website/hooks/toggle.js similarity index 100% rename from packages/website/src/hooks/toggle.js rename to packages/website/hooks/toggle.js diff --git a/packages/website/src/hooks/visibility-sensor.js b/packages/website/hooks/visibility-sensor.js similarity index 100% rename from packages/website/src/hooks/visibility-sensor.js rename to packages/website/hooks/visibility-sensor.js diff --git a/packages/website/src/hooks/will-unmount.js b/packages/website/hooks/will-unmount.js similarity index 100% rename from packages/website/src/hooks/will-unmount.js rename to packages/website/hooks/will-unmount.js diff --git a/packages/website/src/hooks/window-size.js b/packages/website/hooks/window-size.js similarity index 100% rename from packages/website/src/hooks/window-size.js rename to packages/website/hooks/window-size.js diff --git a/packages/website/src/hooks/worker.js b/packages/website/hooks/worker.js similarity index 100% rename from packages/website/src/hooks/worker.js rename to packages/website/hooks/worker.js diff --git a/packages/website/src/next.config.js b/packages/website/next.config.js similarity index 100% rename from packages/website/src/next.config.js rename to packages/website/next.config.js diff --git a/packages/website/now.json b/packages/website/now.json index bd20f50dc7..a5207a595c 100644 --- a/packages/website/now.json +++ b/packages/website/now.json @@ -3,7 +3,7 @@ "alias": ["react-hooks.org"], "version": 2, "builds": [ - { "src": "src/package.json", "use": "@now/static-build" }, + { "src": "package.json", "use": "@now/static-build" }, { "src": "api/hooks/*.js", "use": "@now/node" @@ -18,7 +18,7 @@ }, { "src": "/(.*)", - "dest": "/src/$1" + "dest": "/$1" } ] } diff --git a/packages/website/package.json b/packages/website/package.json index 37a3e26868..6b7b11f0a8 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -6,11 +6,15 @@ "private": true, "version": "1.0.39", "scripts": { - "predeploy": "npm run update-deps", - "deploy": "sh scripts/deploy.sh", + "dev": "node .", + "build": "npm run now-build", + "prebuild": "rimraf dist .next", + "now-build": "next build && next export -o dist", + "prestart": "npm run now-build", + "start": "serve dist", "update-deps": "node scripts/update-deps.js", - "dev": "sh scripts/dev.sh", - "build": "echo \"build\" " + "predeploy": "npm run update-deps && npm run now-build", + "deploy": "now --team react-hooks && now --team react-hooks alias" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "1.2.8", @@ -19,6 +23,27 @@ "@mdx-js/mdx": "0.16.0", "@mdx-js/runtime": "0.16.0", "@mdx-js/tag": "0.16.0", + "@rooks/use-boundingclientrect": "1.0.5", + "@rooks/use-counter": "1.0.5", + "@rooks/use-did-mount": "1.0.5", + "@rooks/use-input": "1.0.5", + "@rooks/use-interval": "1.0.5", + "@rooks/use-key": "1.0.6", + "@rooks/use-localstorage": "1.0.5", + "@rooks/use-mouse": "1.0.5", + "@rooks/use-mutation-observer": "1.0.5", + "@rooks/use-navigator-language": "1.0.5", + "@rooks/use-online": "1.0.5", + "@rooks/use-outside-click": "1.0.5", + "@rooks/use-select": "1.0.5", + "@rooks/use-sessionstorage": "1.0.5", + "@rooks/use-time-ago": "1.0.5", + "@rooks/use-timeout": "1.0.5", + "@rooks/use-toggle": "1.0.5", + "@rooks/use-visibility-sensor": "1.0.5", + "@rooks/use-will-unmount": "1.0.5", + "@rooks/use-window-size": "1.0.5", + "@rooks/use-worker": "1.0.5", "@zeit/next-css": "1.0.1", "@zeit/next-mdx": "1.2.0", "babel-plugin-macros": "2.4.5", @@ -32,7 +57,9 @@ "next": "7.0.2", "npm-install-package": "2.1.0", "prismjs": "1.15.0", + "react": "16.8.0-alpha.1", "react-cache": "2.0.0-alpha.1", + "react-dom": "16.8.0-alpha.1", "react-live": "1.12.0", "react-no-ssr": "1.1.0", "readme-filename": "1.0.0", diff --git a/packages/website/src/pages/_app.js b/packages/website/pages/_app.js similarity index 100% rename from packages/website/src/pages/_app.js rename to packages/website/pages/_app.js diff --git a/packages/website/src/pages/_document.js b/packages/website/pages/_document.js similarity index 100% rename from packages/website/src/pages/_document.js rename to packages/website/pages/_document.js diff --git a/packages/website/src/pages/hook.js b/packages/website/pages/hook.js similarity index 100% rename from packages/website/src/pages/hook.js rename to packages/website/pages/hook.js diff --git a/packages/website/src/pages/index.js b/packages/website/pages/index.js similarity index 100% rename from packages/website/src/pages/index.js rename to packages/website/pages/index.js diff --git a/packages/website/scripts/update-deps.js b/packages/website/scripts/update-deps.js index 88aa6e534d..b73547691d 100644 --- a/packages/website/scripts/update-deps.js +++ b/packages/website/scripts/update-deps.js @@ -7,20 +7,20 @@ const install = bluebird.promisify(require("npm-install-package")); const capitalize = require("lodash.capitalize"); function deleteExistingHooks() { - const srcHooksPath = path.resolve(__dirname, "../src/hooks"); + const srcHooksPath = path.resolve(__dirname, "../hooks"); return del([srcHooksPath + "/*.js"]); } function deleteExistingReadmes() { - const srcReadmesPath = path.resolve(__dirname, "../src/_readmes"); + const srcReadmesPath = path.resolve(__dirname, "../_readmes"); return del([srcReadmesPath + "/*.js"]); } function getHookPath(hookName) { - return path.resolve(__dirname, "../src/hooks/" + hookName + ".js"); + return path.resolve(__dirname, "../hooks/" + hookName + ".js"); } function getReadmePath(hookName) { - return path.resolve(__dirname, "../src/_readmes/" + hookName + ".md"); + return path.resolve(__dirname, "../_readmes/" + hookName + ".md"); } function getTemplate(pkgName) { @@ -77,7 +77,7 @@ function writeToHooksFolderInWebsiteSrc(publishedPackageNames) { }); return Promise.all(hooks).then(() => write( - path.resolve(__dirname, "../src/utils/getHookMap.js"), + path.resolve(__dirname, "../utils/getHookMap.js"), getHookMapTemplate(hookNames) ) ); @@ -93,7 +93,7 @@ function writeToReadmeFolderInWebsiteSrc(readmes, publishedPackageNames) { }); return Promise.all(readmes).then(() => { return write( - path.resolve(__dirname, "../src/utils/getReadmeMap.js"), + path.resolve(__dirname, "../utils/getReadmeMap.js"), getReadmeMapTemplate(hookNames) ); }); @@ -136,7 +136,7 @@ fetch("https://react-hooks.org/api/hooks") }) .then(() => { const installPkgs = publishedPackageNames.map(m => `${m}@latest`); - process.chdir(path.join(__dirname, "../src")); + process.chdir(path.join(__dirname, "..")); return install(installPkgs, { save: true }); }); }); diff --git a/packages/website/src/server.js b/packages/website/server.js similarity index 100% rename from packages/website/src/server.js rename to packages/website/server.js diff --git a/packages/website/src/.gitignore b/packages/website/src/.gitignore deleted file mode 100644 index d44cdff0cc..0000000000 --- a/packages/website/src/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -dist -out \ No newline at end of file diff --git a/packages/website/src/_readmes/boundingclientrect.md b/packages/website/src/_readmes/boundingclientrect.md deleted file mode 100644 index eb265563b2..0000000000 --- a/packages/website/src/_readmes/boundingclientrect.md +++ /dev/null @@ -1,77 +0,0 @@ -# @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/src/_readmes/counter.md b/packages/website/src/_readmes/counter.md deleted file mode 100644 index 8c664243c4..0000000000 --- a/packages/website/src/_readmes/counter.md +++ /dev/null @@ -1,58 +0,0 @@ -# @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/src/_readmes/did-mount.md b/packages/website/src/_readmes/did-mount.md deleted file mode 100644 index 505a80ecae..0000000000 --- a/packages/website/src/_readmes/did-mount.md +++ /dev/null @@ -1,28 +0,0 @@ -# @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/src/_readmes/input.md b/packages/website/src/_readmes/input.md deleted file mode 100644 index 4c2b98dc6f..0000000000 --- a/packages/website/src/_readmes/input.md +++ /dev/null @@ -1,69 +0,0 @@ -# @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/src/_readmes/interval.md b/packages/website/src/_readmes/interval.md deleted file mode 100644 index e423d68502..0000000000 --- a/packages/website/src/_readmes/interval.md +++ /dev/null @@ -1,62 +0,0 @@ -# @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/src/_readmes/key.md b/packages/website/src/_readmes/key.md deleted file mode 100644 index 7e94c04ad5..0000000000 --- a/packages/website/src/_readmes/key.md +++ /dev/null @@ -1,113 +0,0 @@ -# @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/src/_readmes/localstorage.md b/packages/website/src/_readmes/localstorage.md deleted file mode 100644 index c23c62f617..0000000000 --- a/packages/website/src/_readmes/localstorage.md +++ /dev/null @@ -1,30 +0,0 @@ -# @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/src/_readmes/mouse.md b/packages/website/src/_readmes/mouse.md deleted file mode 100644 index fa4779316c..0000000000 --- a/packages/website/src/_readmes/mouse.md +++ /dev/null @@ -1,33 +0,0 @@ -# @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/src/_readmes/mutation-observer.md b/packages/website/src/_readmes/mutation-observer.md deleted file mode 100644 index 18258fc5b0..0000000000 --- a/packages/website/src/_readmes/mutation-observer.md +++ /dev/null @@ -1,76 +0,0 @@ -# @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/src/_readmes/navigator-language.md b/packages/website/src/_readmes/navigator-language.md deleted file mode 100644 index 75eba5168d..0000000000 --- a/packages/website/src/_readmes/navigator-language.md +++ /dev/null @@ -1,24 +0,0 @@ -# @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/src/_readmes/online.md b/packages/website/src/_readmes/online.md deleted file mode 100644 index 929c05d723..0000000000 --- a/packages/website/src/_readmes/online.md +++ /dev/null @@ -1 +0,0 @@ -404: Not Found diff --git a/packages/website/src/_readmes/outside-click.md b/packages/website/src/_readmes/outside-click.md deleted file mode 100644 index cb4de07ec8..0000000000 --- a/packages/website/src/_readmes/outside-click.md +++ /dev/null @@ -1,28 +0,0 @@ -# @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/src/_readmes/select.md b/packages/website/src/_readmes/select.md deleted file mode 100644 index 3644b67285..0000000000 --- a/packages/website/src/_readmes/select.md +++ /dev/null @@ -1,62 +0,0 @@ -# @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/src/_readmes/sessionstorage.md b/packages/website/src/_readmes/sessionstorage.md deleted file mode 100644 index 8fec960ed5..0000000000 --- a/packages/website/src/_readmes/sessionstorage.md +++ /dev/null @@ -1,28 +0,0 @@ -# @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/src/_readmes/time-ago.md b/packages/website/src/_readmes/time-ago.md deleted file mode 100644 index bce65bcac5..0000000000 --- a/packages/website/src/_readmes/time-ago.md +++ /dev/null @@ -1,48 +0,0 @@ -# @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/src/_readmes/timeout.md b/packages/website/src/_readmes/timeout.md deleted file mode 100644 index 0f5576d6b4..0000000000 --- a/packages/website/src/_readmes/timeout.md +++ /dev/null @@ -1,42 +0,0 @@ -# @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/src/_readmes/toggle.md b/packages/website/src/_readmes/toggle.md deleted file mode 100644 index 4e00cce48c..0000000000 --- a/packages/website/src/_readmes/toggle.md +++ /dev/null @@ -1,61 +0,0 @@ -# @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/src/_readmes/visibility-sensor.md b/packages/website/src/_readmes/visibility-sensor.md deleted file mode 100644 index 5ddf0db140..0000000000 --- a/packages/website/src/_readmes/visibility-sensor.md +++ /dev/null @@ -1,85 +0,0 @@ -# @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/src/_readmes/will-unmount.md b/packages/website/src/_readmes/will-unmount.md deleted file mode 100644 index 2981dbec91..0000000000 --- a/packages/website/src/_readmes/will-unmount.md +++ /dev/null @@ -1,47 +0,0 @@ -# @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/src/_readmes/window-size.md b/packages/website/src/_readmes/window-size.md deleted file mode 100644 index 3d5300f084..0000000000 --- a/packages/website/src/_readmes/window-size.md +++ /dev/null @@ -1,48 +0,0 @@ -# @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/src/_readmes/worker.md b/packages/website/src/_readmes/worker.md deleted file mode 100644 index 26b0b3adcb..0000000000 --- a/packages/website/src/_readmes/worker.md +++ /dev/null @@ -1,43 +0,0 @@ -# @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 diff --git a/packages/website/src/package.json b/packages/website/src/package.json index ceb0d42ccf..386f189075 100644 --- a/packages/website/src/package.json +++ b/packages/website/src/package.json @@ -36,9 +36,7 @@ "@rooks/use-visibility-sensor": "1.0.3-alpha.0", "@rooks/use-will-unmount": "1.0.3-alpha.0", "@rooks/use-window-size": "1.0.3-alpha.0", - "@rooks/use-worker": "1.0.3-alpha.0" - }, - "devDependencies": { + "@rooks/use-worker": "1.0.3-alpha.0", "@fortawesome/fontawesome-svg-core": "1.2.8", "@fortawesome/free-solid-svg-icons": "5.5.0", "@fortawesome/react-fontawesome": "0.1.3", diff --git a/packages/website/src/static/logo.png b/packages/website/static/logo.png similarity index 100% rename from packages/website/src/static/logo.png rename to packages/website/static/logo.png diff --git a/packages/website/src/test/index.spec.js b/packages/website/test/index.spec.js similarity index 100% rename from packages/website/src/test/index.spec.js rename to packages/website/test/index.spec.js diff --git a/packages/website/src/utils/contexts.js b/packages/website/utils/contexts.js similarity index 100% rename from packages/website/src/utils/contexts.js rename to packages/website/utils/contexts.js diff --git a/packages/website/src/utils/getAllHooks.js b/packages/website/utils/getAllHooks.js similarity index 100% rename from packages/website/src/utils/getAllHooks.js rename to packages/website/utils/getAllHooks.js diff --git a/packages/website/src/utils/getHookMap.js b/packages/website/utils/getHookMap.js similarity index 100% rename from packages/website/src/utils/getHookMap.js rename to packages/website/utils/getHookMap.js diff --git a/packages/website/src/utils/getNpmBlob.js b/packages/website/utils/getNpmBlob.js similarity index 100% rename from packages/website/src/utils/getNpmBlob.js rename to packages/website/utils/getNpmBlob.js diff --git a/packages/website/src/utils/getReadmeMap.js b/packages/website/utils/getReadmeMap.js similarity index 100% rename from packages/website/src/utils/getReadmeMap.js rename to packages/website/utils/getReadmeMap.js diff --git a/packages/website/src/utils/mdx-components.js b/packages/website/utils/mdx-components.js similarity index 100% rename from packages/website/src/utils/mdx-components.js rename to packages/website/utils/mdx-components.js diff --git a/packages/website/src/utils/prismTemplateString.js b/packages/website/utils/prismTemplateString.js similarity index 100% rename from packages/website/src/utils/prismTemplateString.js rename to packages/website/utils/prismTemplateString.js diff --git a/packages/website/src/yarn.lock b/packages/website/yarn.lock similarity index 100% rename from packages/website/src/yarn.lock rename to packages/website/yarn.lock diff --git a/yarn.lock b/yarn.lock index 225b4dd03a..6451052bab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8158,15 +8158,15 @@ react-cache@2.0.0-alpha.1: resolved "https://registry.yarnpkg.com/react-cache/-/react-cache-2.0.0-alpha.1.tgz#4c119188248bc988a61268458bc18bd845f2ec19" integrity sha512-dDJVVGvxAlZE/dMxDXaxU5ZfcE4fbaSmJVFrCTi6dYWXDp7YjCsnywkpEYG6IURVW+eJrCydAIDcW0FADw0/5w== -react-dom@16.7.0-alpha.2: - version "16.7.0-alpha.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.2.tgz#16632880ed43676315991d8b412cce6975a30282" - integrity sha512-o0mMw8jBlwHjGZEy/vvKd/6giAX0+skREMOTs3/QHmgi+yAhUClp4My4Z9lsKy3SXV+03uPdm1l/QM7NTcGuMw== +react-dom@16.8.0-alpha.1: + version "16.8.0-alpha.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.0-alpha.1.tgz#dab73b8354ba2e498e3127d18e29d4546cea889e" + integrity sha512-tZCUM8BpnwUHJmLnUWP9c3vVZxnCqYotj7s4tx7umojG6BKv745KIBtuPTzt0EI0q50GMLEpmT/CPQ8iA61TwQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.12.0-alpha.2" + scheduler "^0.13.0-alpha.1" react-error-overlay@4.0.0: version "4.0.0" @@ -8205,15 +8205,15 @@ react-testing-library@^5.2.3: dependencies: dom-testing-library "^3.13.1" -react@16.7.0-alpha.2: - version "16.7.0-alpha.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.2.tgz#924f2ae843a46ea82d104a8def7a599fbf2c78ce" - integrity sha512-Xh1CC8KkqIojhC+LFXd21jxlVtzoVYdGnQAi/I2+dxbmos9ghbx5TQf9/nDxc4WxaFfUQJkya0w1k6rMeyIaxQ== +react@16.8.0-alpha.1: + version "16.8.0-alpha.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.8.0-alpha.1.tgz#c2b32689f3b466d3ce85a634dd9035f789d2cd97" + integrity sha512-vLwwnhM2dXrCsiQmcSxF2UdZVV5xsiXjK5Yetmy8dVqngJhQ3aw3YJhZN/YmyonxwdimH40wVqFQfsl4gSu2RA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.12.0-alpha.2" + scheduler "^0.13.0-alpha.1" read-cmd-shim@^1.0.1: version "1.0.1" @@ -8778,10 +8778,10 @@ sax@^1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.12.0-alpha.2: - version "0.12.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b" - integrity sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw== +scheduler@^0.13.0-alpha.1: + version "0.13.0-alpha.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0-alpha.1.tgz#753977fb4fb35d8cdd559868a11e46b640955556" + integrity sha512-W0sH0848sVuPKg+I18vTYQyzVtA4X1lrVgSeXK6KnOPUltFdJcY5nkbTkjGUeS/E0x+eBsNYfSdhJtGjT95njw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1"