├── .gitignore ├── LICENSE ├── README.md ├── hooks.json └── site ├── .gitignore ├── README.md ├── gatsby-config.js ├── package.json ├── src ├── components │ ├── header.js │ ├── layout.css │ └── layout.js ├── images │ └── gatsby-icon.png └── pages │ ├── 404.js │ └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Nik Graf 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Collection of React Hooks 2 | 3 | _Warning: Hooks are currently a React [RFC](https://github.com/reactjs/rfcs/pull/68) and **not ready for production**. Use at minimum `react@16.7.0-alpha.0` to use this package._ 4 | 5 | ## Website 6 | 7 | [https://nikgraf.github.io/react-hooks/](https://nikgraf.github.io/react-hooks/) 8 | 9 | ## Planned Features 10 | 11 | - Add Type System Info e.g. TypeScript, Flow, Reason 12 | - Add information from Github and NPM 13 | -------------------------------------------------------------------------------- /hooks.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "useState", 4 | "tags": ["React Core", "State Management"], 5 | "repositoryUrl": "https://github.com/facebook/react", 6 | "importStatement": "import { useState } from \"react\";" 7 | }, 8 | { 9 | "name": "useReducer", 10 | "tags": ["React Core", "State Management"], 11 | "repositoryUrl": "https://github.com/facebook/react", 12 | "importStatement": "import { useReducer } from \"react\";" 13 | }, 14 | { 15 | "name": "useEffect", 16 | "tags": ["React Core"], 17 | "repositoryUrl": "https://github.com/facebook/react", 18 | "importStatement": "import { useEffect } from \"react\";" 19 | }, 20 | { 21 | "name": "useLayoutEffect", 22 | "tags": ["React Core"], 23 | "repositoryUrl": "https://github.com/facebook/react", 24 | "importStatement": "import { useLayoutEffect } from \"react\";" 25 | }, 26 | { 27 | "name": "useContext", 28 | "tags": ["React Core"], 29 | "repositoryUrl": "https://github.com/facebook/react", 30 | "importStatement": "import { useContext } from \"react\";" 31 | }, 32 | { 33 | "name": "useMemo", 34 | "tags": ["React Core"], 35 | "repositoryUrl": "https://github.com/facebook/react", 36 | "importStatement": "import { useMemo } from \"react\";" 37 | }, 38 | { 39 | "name": "useRef", 40 | "tags": ["React Core"], 41 | "repositoryUrl": "https://github.com/facebook/react", 42 | "importStatement": "import { useRef } from \"react\";" 43 | }, 44 | { 45 | "name": "useMutationEffect", 46 | "tags": ["React Core"], 47 | "repositoryUrl": "https://github.com/facebook/react", 48 | "importStatement": "import { useMutationEffect } from \"react\";" 49 | }, 50 | { 51 | "name": "useImperativeMethods", 52 | "tags": ["React Core"], 53 | "repositoryUrl": "https://github.com/facebook/react", 54 | "importStatement": "import { useImperativeMethods } from \"react\";" 55 | }, 56 | { 57 | "name": "useCallback", 58 | "tags": ["React Core"], 59 | "repositoryUrl": "https://github.com/facebook/react", 60 | "importStatement": "import { useCallback } from \"react\";" 61 | }, 62 | { 63 | "name": "useImmer", 64 | "tags": ["State Management"], 65 | "repositoryUrl": "https://github.com/mweststrate/use-immer", 66 | "importStatement": "import { useImmer } from \"use-immer\";" 67 | }, 68 | { 69 | "name": "useImmerReducer", 70 | "tags": ["State Management"], 71 | "repositoryUrl": "https://github.com/mweststrate/use-immer", 72 | "importStatement": "import { useImmerReducer } from \"use-immer\";" 73 | }, 74 | { 75 | "name": "useSpring", 76 | "tags": ["Animation"], 77 | "repositoryUrl": "https://github.com/drcmda/react-spring", 78 | "importStatement": "import { useSpring } from \"react-spring\";" 79 | }, 80 | { 81 | "name": "useWindowSize", 82 | "tags": ["Layout"], 83 | "repositoryUrl": "https://github.com/rehooks/window-size", 84 | "importStatement": "import useWindowSize from \"@rehooks/window-size\";" 85 | }, 86 | { 87 | "name": "useInputValue", 88 | "tags": ["State Management"], 89 | "repositoryUrl": "https://github.com/rehooks/input-value", 90 | "importStatement": "import useInputValue from \"@rehooks/input-value\";" 91 | }, 92 | { 93 | "name": "useDocumentVisibility", 94 | "tags": ["Layout"], 95 | "repositoryUrl": "https://github.com/rehooks/document-visibility", 96 | "importStatement": "import useWindowSize from \"@rehooks/document-visibility\";" 97 | }, 98 | { 99 | "name": "useComponentSize", 100 | "tags": ["Layout"], 101 | "repositoryUrl": "https://github.com/rehooks/component-size", 102 | "importStatement": "import useWindowSize from \"@rehooks/component-size\";" 103 | }, 104 | { 105 | "name": "useDocumentTitle", 106 | "tags": [], 107 | "repositoryUrl": "https://github.com/rehooks/document-title", 108 | "importStatement": "import useDocumentTitle from \"@rehooks/document-title\";" 109 | }, 110 | { 111 | "name": "useNetworkStatus", 112 | "tags": ["Network"], 113 | "repositoryUrl": "https://github.com/rehooks/network-status", 114 | "importStatement": "import useNetworkStatus from \"@rehooks/network-status\";" 115 | }, 116 | { 117 | "name": "useOnlineStatus", 118 | "tags": ["Network"], 119 | "repositoryUrl": "https://github.com/rehooks/online-status", 120 | "importStatement": "import useOnlineStatus from \"@rehooks/online-status\";" 121 | }, 122 | { 123 | "name": "useLocalStorage", 124 | "tags": [], 125 | "repositoryUrl": "https://github.com/rehooks/local-storage", 126 | "importStatement": "import useLocalStorage from \"@rehooks/local-storage\";" 127 | }, 128 | { 129 | "name": "useWindowScrollPosition", 130 | "tags": ["Layout"], 131 | "repositoryUrl": "https://github.com/rehooks/window-scroll-position", 132 | "importStatement": "import useWindowScrollPosition from \"@rehooks/window-scroll-position\";" 133 | }, 134 | { 135 | "name": "useDeviceMotion", 136 | "tags": [], 137 | "repositoryUrl": "https://github.com/palmerhq/the-platform", 138 | "importStatement": "import useDeviceMotion from \"the-platform\";" 139 | }, 140 | { 141 | "name": "useDeviceOrientation", 142 | "tags": [], 143 | "repositoryUrl": "https://github.com/palmerhq/the-platform", 144 | "importStatement": "import useDeviceOrientation from \"the-platform\";" 145 | }, 146 | { 147 | "name": "useGeoPosition", 148 | "tags": [], 149 | "repositoryUrl": "https://github.com/palmerhq/the-platform", 150 | "importStatement": "import useGeoPosition from \"the-platform\";" 151 | }, 152 | { 153 | "name": "useNetworkStatus", 154 | "tags": ["Network"], 155 | "repositoryUrl": "https://github.com/palmerhq/the-platform", 156 | "importStatement": "import useNetworkStatus from \"the-platform\";" 157 | }, 158 | { 159 | "name": "useMedia", 160 | "tags": [], 161 | "repositoryUrl": "https://github.com/palmerhq/the-platform", 162 | "importStatement": "import useMedia from \"the-platform\";" 163 | }, 164 | { 165 | "name": "useScript", 166 | "tags": [], 167 | "repositoryUrl": "https://github.com/palmerhq/the-platform", 168 | "importStatement": "import useScript from \"the-platform\";" 169 | }, 170 | { 171 | "name": "useStylesheet", 172 | "tags": [], 173 | "repositoryUrl": "https://github.com/palmerhq/the-platform", 174 | "importStatement": "import useStylesheet from \"the-platform\";" 175 | }, 176 | { 177 | "name": "useWindowScrollPosition", 178 | "tags": [], 179 | "repositoryUrl": "https://github.com/palmerhq/the-platform", 180 | "importStatement": "import useWindowScrollPosition from \"the-platform\";" 181 | }, 182 | { 183 | "name": "useWindowSize", 184 | "tags": ["Layout"], 185 | "repositoryUrl": "https://github.com/palmerhq/the-platform", 186 | "importStatement": "import useWindowSize from \"the-platform\";" 187 | }, 188 | { 189 | "name": "useStateful", 190 | "tags": ["State Management"], 191 | "repositoryUrl": "https://github.com/kitze/react-hanger", 192 | "importStatement": "import { useStateful } from \"react-hanger\";" 193 | }, 194 | { 195 | "name": "useOnMount", 196 | "tags": [], 197 | "repositoryUrl": "https://github.com/kitze/react-hanger", 198 | "importStatement": "import { useOnMount } from \"react-hanger\";" 199 | }, 200 | { 201 | "name": "useOnUnmount", 202 | "tags": [], 203 | "repositoryUrl": "https://github.com/kitze/react-hanger", 204 | "importStatement": "import { useOnUnmount } from \"react-hanger\";" 205 | }, 206 | { 207 | "name": "useLifecycleHooks", 208 | "tags": [], 209 | "repositoryUrl": "https://github.com/kitze/react-hanger", 210 | "importStatement": "import { useLifecycleHooks } from \"react-hanger\";" 211 | }, 212 | { 213 | "name": "useBoolean", 214 | "tags": ["State Management"], 215 | "repositoryUrl": "https://github.com/kitze/react-hanger", 216 | "importStatement": "import { useBoolean } from \"react-hanger\";" 217 | }, 218 | { 219 | "name": "useNumber", 220 | "tags": ["State Management"], 221 | "repositoryUrl": "https://github.com/kitze/react-hanger", 222 | "importStatement": "import { useNumber } from \"react-hanger\";" 223 | }, 224 | { 225 | "name": "useInput", 226 | "tags": ["State Management"], 227 | "repositoryUrl": "https://github.com/kitze/react-hanger", 228 | "importStatement": "import { useInput } from \"react-hanger\";" 229 | }, 230 | { 231 | "name": "useArray", 232 | "tags": ["State Management"], 233 | "repositoryUrl": "https://github.com/kitze/react-hanger", 234 | "importStatement": "import { useArray } from \"react-hanger\";" 235 | }, 236 | { 237 | "name": "useSetState", 238 | "tags": ["State Management"], 239 | "repositoryUrl": "https://github.com/kitze/react-hanger", 240 | "importStatement": "import { useSetState } from \"react-hanger\";" 241 | }, 242 | { 243 | "name": "usePrevious", 244 | "tags": ["State Management"], 245 | "repositoryUrl": "https://github.com/kitze/react-hanger", 246 | "importStatement": "import { usePrevious } from \"react-hanger\";" 247 | }, 248 | { 249 | "name": "useToggle", 250 | "tags": ["State Management"], 251 | "repositoryUrl": "https://github.com/kalcifer/react-powerhooks", 252 | "importStatement": "import { useToggle } from \"react-powerhooks\";" 253 | }, 254 | { 255 | "name": "useActive", 256 | "tags": [], 257 | "repositoryUrl": "https://github.com/kalcifer/react-powerhooks", 258 | "importStatement": "import { useActive } from \"react-powerhooks\";" 259 | }, 260 | { 261 | "name": "useInterval", 262 | "tags": ["Timing"], 263 | "repositoryUrl": "https://github.com/kalcifer/react-powerhooks", 264 | "importStatement": "import { useInterval } from \"react-powerhooks\";" 265 | }, 266 | { 267 | "name": "useBattery", 268 | "tags": ["Sensor", "Browser-API", "Battery"], 269 | "repositoryUrl": "https://github.com/streamich/react-use", 270 | "importStatement": "import { useBattery } from \"react-use\";" 271 | }, 272 | { 273 | "name": "useGeolocation", 274 | "tags": ["Sensor", "Browser-API", "Geo", "Location"], 275 | "repositoryUrl": "https://github.com/streamich/react-use", 276 | "importStatement": "import { useGeolocation } from \"react-use\";" 277 | }, 278 | { 279 | "name": "useHover", 280 | "tags": ["Sensor", "UI", "Mouse", "Hover"], 281 | "repositoryUrl": "https://github.com/streamich/react-use", 282 | "importStatement": "import { useHover } from \"react-use\";" 283 | }, 284 | { 285 | "name": "useIdle", 286 | "tags": ["Sensor", "Browser-API", "UI"], 287 | "repositoryUrl": "https://github.com/streamich/react-use", 288 | "importStatement": "import { useIdle } from \"react-use\";" 289 | }, 290 | { 291 | "name": "useLocation", 292 | "tags": ["Sensor", "Browser-API", "Location"], 293 | "repositoryUrl": "https://github.com/streamich/react-use", 294 | "importStatement": "import { useLocation } from \"react-use\";" 295 | }, 296 | { 297 | "name": "useMedia", 298 | "tags": ["Sensor", "Browser-API", "Media-Query", "CSS"], 299 | "repositoryUrl": "https://github.com/streamich/react-use", 300 | "importStatement": "import { useMedia } from \"react-use\";" 301 | }, 302 | { 303 | "name": "useMediaDevices", 304 | "tags": ["Sensor", "Browser-API", "Devices"], 305 | "repositoryUrl": "https://github.com/streamich/react-use", 306 | "importStatement": "import { useMediaDevices } from \"react-use\";" 307 | }, 308 | { 309 | "name": "useMotion", 310 | "tags": ["Sensor", "Browser-API", "Motion"], 311 | "repositoryUrl": "https://github.com/streamich/react-use", 312 | "importStatement": "import { useMotion } from \"react-use\";" 313 | }, 314 | { 315 | "name": "useNetwork", 316 | "tags": ["Sensor", "Browser-API", "Network"], 317 | "repositoryUrl": "https://github.com/streamich/react-use", 318 | "importStatement": "import { useNetwork } from \"react-use\";" 319 | }, 320 | { 321 | "name": "useOrientation", 322 | "tags": ["Sensor", "Browser-API", "Orientation"], 323 | "repositoryUrl": "https://github.com/streamich/react-use", 324 | "importStatement": "import { useOrientation } from \"react-use\";" 325 | }, 326 | { 327 | "name": "useSize", 328 | "tags": ["Sensor", "UI", "Size"], 329 | "repositoryUrl": "https://github.com/streamich/react-use", 330 | "importStatement": "import { useSize } from \"react-use\";" 331 | }, 332 | { 333 | "name": "useWindowSize", 334 | "tags": ["Sensor", "Browser-API", "UI", "Window", "Size"], 335 | "repositoryUrl": "https://github.com/streamich/react-use", 336 | "importStatement": "import { useWindowSize } from \"react-use\";" 337 | }, 338 | { 339 | "name": "useAudio", 340 | "tags": ["UI", "Audio"], 341 | "repositoryUrl": "https://github.com/streamich/react-use", 342 | "importStatement": "import { useAudio } from \"react-use\";" 343 | }, 344 | { 345 | "name": "useSpeech", 346 | "tags": ["UI", "Audio", "Speech"], 347 | "repositoryUrl": "https://github.com/streamich/react-use", 348 | "importStatement": "import { useSpeech } from \"react-use\";" 349 | }, 350 | { 351 | "name": "useRaf", 352 | "tags": ["Animations", "requestAnimationFrame", "Rendering"], 353 | "repositoryUrl": "https://github.com/streamich/react-use", 354 | "importStatement": "import { useRaf } from \"react-use\";" 355 | }, 356 | { 357 | "name": "useSpring", 358 | "tags": ["Animations", "Spring", "Tween"], 359 | "repositoryUrl": "https://github.com/streamich/react-use", 360 | "importStatement": "import { useSpring } from \"react-use\";" 361 | }, 362 | { 363 | "name": "useTimeout", 364 | "tags": ["Animations", "Timeout"], 365 | "repositoryUrl": "https://github.com/streamich/react-use", 366 | "importStatement": "import { useTimeout } from \"react-use\";" 367 | }, 368 | { 369 | "name": "useTween", 370 | "tags": ["Animations", "Tween"], 371 | "repositoryUrl": "https://github.com/streamich/react-use", 372 | "importStatement": "import { useTween } from \"react-use\";" 373 | }, 374 | { 375 | "name": "useAsync", 376 | "tags": ["Side-effect", "Async"], 377 | "repositoryUrl": "https://github.com/streamich/react-use", 378 | "importStatement": "import { useAsync } from \"react-use\";" 379 | }, 380 | { 381 | "name": "useCss", 382 | "tags": ["Side-effect", "UI", "CSS"], 383 | "repositoryUrl": "https://github.com/streamich/react-use", 384 | "importStatement": "import { useCss } from \"react-use\";" 385 | }, 386 | { 387 | "name": "useFavicon", 388 | "tags": ["Side-effect", "Favicon"], 389 | "repositoryUrl": "https://github.com/streamich/react-use", 390 | "importStatement": "import { useFavicon } from \"react-use\";" 391 | }, 392 | { 393 | "name": "useTitle", 394 | "tags": ["Side-effect", "Title"], 395 | "repositoryUrl": "https://github.com/streamich/react-use", 396 | "importStatement": "import { useTitle } from \"react-use\";" 397 | }, 398 | { 399 | "name": "useLifecycles", 400 | "tags": ["Lifecycles"], 401 | "repositoryUrl": "https://github.com/streamich/react-use", 402 | "importStatement": "import { useLifecycles } from \"react-use\";" 403 | }, 404 | { 405 | "name": "useLogger", 406 | "tags": ["Lifecycles"], 407 | "repositoryUrl": "https://github.com/streamich/react-use", 408 | "importStatement": "import { useLogger } from \"react-use\";" 409 | }, 410 | { 411 | "name": "useMount", 412 | "tags": ["Lifecycles"], 413 | "repositoryUrl": "https://github.com/streamich/react-use", 414 | "importStatement": "import { useMount } from \"react-use\";" 415 | }, 416 | { 417 | "name": "useUnmount", 418 | "tags": ["Lifecycles"], 419 | "repositoryUrl": "https://github.com/streamich/react-use", 420 | "importStatement": "import { useUnmount } from \"react-use\";" 421 | }, 422 | { 423 | "name": "useSetState", 424 | "tags": ["State"], 425 | "repositoryUrl": "https://github.com/streamich/react-use", 426 | "importStatement": "import { useSetState } from \"react-use\";" 427 | }, 428 | { 429 | "name": "useToggle", 430 | "tags": ["State"], 431 | "repositoryUrl": "https://github.com/streamich/react-use", 432 | "importStatement": "import { useToggle } from \"react-use\";" 433 | }, 434 | { 435 | "name": "useCounter", 436 | "tags": ["State"], 437 | "repositoryUrl": "https://github.com/streamich/react-use", 438 | "importStatement": "import { useCounter } from \"react-use\";" 439 | }, 440 | { 441 | "name": "useList", 442 | "tags": ["State"], 443 | "repositoryUrl": "https://github.com/streamich/react-use", 444 | "importStatement": "import { useList } from \"react-use\";" 445 | }, 446 | { 447 | "name": "useMap", 448 | "tags": ["State"], 449 | "repositoryUrl": "https://github.com/streamich/react-use", 450 | "importStatement": "import { useMap } from \"react-use\";" 451 | }, 452 | { 453 | "name": "useCallbag", 454 | "tags": ["Streams"], 455 | "repositoryUrl": "https://github.com/Andarist/use-callbag", 456 | "importStatement": "import useCallbag from \"use-callbag\";" 457 | }, 458 | { 459 | "name": "createSelector", 460 | "tags": [], 461 | "repositoryUrl": "https://github.com/Andarist/react-selector-hooks", 462 | "importStatement": "import { createSelector } from \"react-selector-hooks\";" 463 | }, 464 | { 465 | "name": "createStateSelector", 466 | "tags": [], 467 | "repositoryUrl": "https://github.com/Andarist/react-selector-hooks", 468 | "importStatement": "import { createStateSelector } from \"react-selector-hooks\";" 469 | }, 470 | { 471 | "name": "createStructuredSelector", 472 | "tags": [], 473 | "repositoryUrl": "https://github.com/Andarist/react-selector-hooks", 474 | "importStatement": "import { createStructuredSelector } from \"react-selector-hooks\";" 475 | }, 476 | { 477 | "name": "react-intersection-visible-hook", 478 | "tags": ["Viewport", "Visible"], 479 | "repositoryUrl": "https://github.com/AvraamMavridis/react-intersection-visible-hook", 480 | "importStatement": "import useIntersectionVisible from \"react-intersection-visible-hook\";" 481 | }, 482 | { 483 | "name": "react-window-communication-hook", 484 | "tags": ["Communication"], 485 | "repositoryUrl": "https://github.com/AvraamMavridis/react-window-communication-hook", 486 | "importStatement": "import useBrowserContextCommunication from \"react-window-communication-hook\";" 487 | }, 488 | { 489 | "name": "useSubstate", 490 | "tags": ["State Management"], 491 | "repositoryUrl": "https://github.com/philipp-spiess/use-substate", 492 | "importStatement": "import { SubstateProvider, useSubstate } from \"use-substate\";" 493 | }, 494 | { 495 | "name": "useOnClickOutside", 496 | "tags": ["Sensor", "Click", "UI", "Mouse", "Touch"], 497 | "repositoryUrl": "https://github.com/Andarist/use-onclickoutside", 498 | "importStatement": "import useOnClickOutside from \"use-onclickoutside\";" 499 | }, 500 | { 501 | "name": "usePrevious", 502 | "tags": [], 503 | "repositoryUrl": "https://github.com/Andarist/use-previous", 504 | "importStatement": "import usePrevious from \"use-previous\";" 505 | }, 506 | { 507 | "name": "react-hooks-global-state", 508 | "tags": ["State Management"], 509 | "repositoryUrl": "https://github.com/dai-shi/react-hooks-global-state", 510 | "importStatement": "import { createGlobalState } from \"react-hooks-global-state\";" 511 | }, 512 | { 513 | "name": "promise-hook", 514 | "tags": ["Network"], 515 | "repositoryUrl": "https://github.com/aiven715/promise-hook", 516 | "importStatement": "import { usePromise } from \"promise-hook\";" 517 | }, 518 | { 519 | "name": "useDomLocation", 520 | "tags": ["UI","Location"], 521 | "repositoryUrl": "https://github.com/forthealllight/dom-location", 522 | "importStatement": "import useDomLocation from \"dom-location\";" 523 | }, 524 | { 525 | "name": "useGraphqlRequest", 526 | "tags": ["graphQL","Network"], 527 | "repositoryUrl": "https://github.com/capaj/use-graphql-request", 528 | "importStatement": "import { setupClient } from \"use-graphql-request\"" 529 | }, 530 | { 531 | "name": "useObjectState", 532 | "tags": ["State Management"], 533 | "repositoryUrl": "https://github.com/thers/use-object-state", 534 | "importStatement": "import { useObjectState } from \"use-object-state\"" 535 | }, 536 | { 537 | "name": "useApolloClient", 538 | "tags": ["graphQL", "Network", "State Management"], 539 | "repositoryUrl": "https://github.com/trojanowski/react-apollo-hooks", 540 | "importStatement": "import { useApolloClient } from \"react-apollo-hooks\"" 541 | }, 542 | { 543 | "name": "useApolloMutation", 544 | "tags": ["graphQL", "Network", "State Management"], 545 | "repositoryUrl": "https://github.com/trojanowski/react-apollo-hooks", 546 | "importStatement": "import { useApolloMutation } from \"react-apollo-hooks\"" 547 | }, 548 | { 549 | "name": "useApolloQuery", 550 | "tags": ["graphQL", "Network", "State Management"], 551 | "repositoryUrl": "https://github.com/trojanowski/react-apollo-hooks", 552 | "importStatement": "import { useApolloQuery } from \"react-apollo-hooks\"" 553 | } 554 | ] 555 | -------------------------------------------------------------------------------- /site/.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | .cache 3 | node_modules 4 | yarn-error.log 5 | 6 | # Build directory 7 | /public 8 | .DS_Store 9 | -------------------------------------------------------------------------------- /site/README.md: -------------------------------------------------------------------------------- 1 | ## Install 2 | 3 | ``` 4 | yarn 5 | ``` 6 | 7 | ## Develop 8 | 9 | ``` 10 | yarn develop 11 | ``` -------------------------------------------------------------------------------- /site/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: 'Collection of React Hooks', 4 | }, 5 | plugins: [ 6 | 'gatsby-plugin-styled-components', 7 | 'gatsby-plugin-react-helmet', 8 | ], 9 | pathPrefix: "/react-hooks", 10 | } 11 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hooks", 3 | "version": "1.0.0", 4 | "author": "Nik Graf", 5 | "dependencies": { 6 | "babel-plugin-styled-components": "^1.8.0", 7 | "gatsby": "^2.0.19", 8 | "gatsby-plugin-react-helmet": "^3.0.0", 9 | "gatsby-plugin-styled-components": "^3.0.0", 10 | "react": "^16.7.0-alpha.0", 11 | "react-dom": "^16.7.0-alpha.0", 12 | "react-helmet": "^5.2.0", 13 | "styled-components": "^4.0.2" 14 | }, 15 | "license": "MIT", 16 | "scripts": { 17 | "build": "gatsby build", 18 | "develop": "gatsby develop", 19 | "deploy": "gatsby build --prefix-paths && gh-pages -d public" 20 | }, 21 | "devDependencies": { 22 | "gh-pages": "^2.0.1", 23 | "prettier": "^1.14.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /site/src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "gatsby"; 3 | 4 | const Header = ({ siteTitle }) => ( 5 |
11 |
18 | 24 | 28 | 32 | 36 | 40 | 41 |

42 | 49 | {siteTitle} 50 | 51 |

52 |
53 |
54 | ); 55 | 56 | export default Header; 57 | -------------------------------------------------------------------------------- /site/src/components/layout.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto|Space+Mono'); 2 | 3 | html { 4 | font-family: sans-serif; 5 | -ms-text-size-adjust: 100%; 6 | -webkit-text-size-adjust: 100%; 7 | font-family: 'Roboto', sans-serif; 8 | } 9 | body { 10 | margin: 0; 11 | } 12 | article, 13 | aside, 14 | details, 15 | figcaption, 16 | figure, 17 | footer, 18 | header, 19 | main, 20 | menu, 21 | nav, 22 | section, 23 | summary { 24 | display: block; 25 | } 26 | audio, 27 | canvas, 28 | progress, 29 | video { 30 | display: inline-block; 31 | } 32 | audio:not([controls]) { 33 | display: none; 34 | height: 0; 35 | } 36 | progress { 37 | vertical-align: baseline; 38 | } 39 | [hidden], 40 | template { 41 | display: none; 42 | } 43 | a { 44 | background-color: transparent; 45 | -webkit-text-decoration-skip: objects; 46 | } 47 | a:active, 48 | a:hover { 49 | outline-width: 0; 50 | } 51 | abbr[title] { 52 | border-bottom: none; 53 | text-decoration: underline; 54 | text-decoration: underline dotted; 55 | } 56 | b, 57 | strong { 58 | font-weight: inherit; 59 | font-weight: bolder; 60 | } 61 | dfn { 62 | font-style: italic; 63 | } 64 | h1 { 65 | font-size: 2em; 66 | margin: .67em 0; 67 | } 68 | mark { 69 | background-color: #ff0; 70 | color: #000; 71 | } 72 | small { 73 | font-size: 80%; 74 | } 75 | sub, 76 | sup { 77 | font-size: 75%; 78 | line-height: 0; 79 | position: relative; 80 | vertical-align: baseline; 81 | } 82 | sub { 83 | bottom: -.25em; 84 | } 85 | sup { 86 | top: -.5em; 87 | } 88 | img { 89 | border-style: none; 90 | } 91 | svg:not(:root) { 92 | overflow: hidden; 93 | } 94 | code, 95 | kbd, 96 | pre, 97 | samp { 98 | font-family: monospace, monospace; 99 | font-size: 1em; 100 | } 101 | figure { 102 | margin: 1em 40px; 103 | } 104 | hr { 105 | box-sizing: content-box; 106 | height: 0; 107 | overflow: visible; 108 | } 109 | button, 110 | input, 111 | optgroup, 112 | select, 113 | textarea { 114 | font: inherit; 115 | margin: 0; 116 | } 117 | optgroup { 118 | font-weight: 700; 119 | } 120 | button, 121 | input { 122 | overflow: visible; 123 | } 124 | button, 125 | select { 126 | text-transform: none; 127 | } 128 | [type=reset], 129 | [type=submit], 130 | button, 131 | html [type=button] { 132 | -webkit-appearance: button; 133 | } 134 | [type=button]::-moz-focus-inner, 135 | [type=reset]::-moz-focus-inner, 136 | [type=submit]::-moz-focus-inner, 137 | button::-moz-focus-inner { 138 | border-style: none; 139 | padding: 0; 140 | } 141 | [type=button]:-moz-focusring, 142 | [type=reset]:-moz-focusring, 143 | [type=submit]:-moz-focusring, 144 | button:-moz-focusring { 145 | outline: 1px dotted ButtonText; 146 | } 147 | fieldset { 148 | border: 1px solid silver; 149 | margin: 0 2px; 150 | padding: .35em .625em .75em; 151 | } 152 | legend { 153 | box-sizing: border-box; 154 | color: inherit; 155 | display: table; 156 | max-width: 100%; 157 | padding: 0; 158 | white-space: normal; 159 | } 160 | textarea { 161 | overflow: auto; 162 | } 163 | [type=checkbox], 164 | [type=radio] { 165 | box-sizing: border-box; 166 | padding: 0; 167 | } 168 | [type=number]::-webkit-inner-spin-button, 169 | [type=number]::-webkit-outer-spin-button { 170 | height: auto; 171 | } 172 | [type=search] { 173 | -webkit-appearance: textfield; 174 | outline-offset: -2px; 175 | } 176 | [type=search]::-webkit-search-cancel-button, 177 | [type=search]::-webkit-search-decoration { 178 | -webkit-appearance: none; 179 | } 180 | ::-webkit-input-placeholder { 181 | color: inherit; 182 | opacity: .54; 183 | } 184 | ::-webkit-file-upload-button { 185 | -webkit-appearance: button; 186 | font: inherit; 187 | } 188 | html { 189 | font: 112.5%/1.45em georgia, serif; 190 | box-sizing: border-box; 191 | overflow-y: scroll; 192 | } 193 | * { 194 | box-sizing: inherit; 195 | } 196 | *:before { 197 | box-sizing: inherit; 198 | } 199 | *:after { 200 | box-sizing: inherit; 201 | } 202 | body { 203 | color: hsla(0, 0%, 0%, 0.8); 204 | font-family: georgia, serif; 205 | font-family: 'Roboto', sans-serif; 206 | font-weight: normal; 207 | word-wrap: break-word; 208 | font-kerning: normal; 209 | -moz-font-feature-settings: "kern", "liga", "clig", "calt"; 210 | -ms-font-feature-settings: "kern", "liga", "clig", "calt"; 211 | -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; 212 | font-feature-settings: "kern", "liga", "clig", "calt"; 213 | } 214 | img { 215 | max-width: 100%; 216 | margin-left: 0; 217 | margin-right: 0; 218 | margin-top: 0; 219 | padding-bottom: 0; 220 | padding-left: 0; 221 | padding-right: 0; 222 | padding-top: 0; 223 | margin-bottom: 1.45rem; 224 | } 225 | h1 { 226 | margin-left: 0; 227 | margin-right: 0; 228 | margin-top: 0; 229 | padding-bottom: 0; 230 | padding-left: 0; 231 | padding-right: 0; 232 | padding-top: 0; 233 | margin-bottom: 1.45rem; 234 | color: inherit; 235 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 236 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 237 | font-weight: bold; 238 | text-rendering: optimizeLegibility; 239 | font-size: 2.25rem; 240 | line-height: 1.1; 241 | } 242 | h2 { 243 | margin-left: 0; 244 | margin-right: 0; 245 | margin-top: 0; 246 | padding-bottom: 0; 247 | padding-left: 0; 248 | padding-right: 0; 249 | padding-top: 0; 250 | margin-bottom: 1.45rem; 251 | color: inherit; 252 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 253 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 254 | font-weight: bold; 255 | text-rendering: optimizeLegibility; 256 | font-size: 1.62671rem; 257 | line-height: 1.1; 258 | } 259 | h3 { 260 | margin-left: 0; 261 | margin-right: 0; 262 | margin-top: 0; 263 | padding-bottom: 0; 264 | padding-left: 0; 265 | padding-right: 0; 266 | padding-top: 0; 267 | margin-bottom: 1.45rem; 268 | color: inherit; 269 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 270 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 271 | font-weight: bold; 272 | text-rendering: optimizeLegibility; 273 | font-size: 1.38316rem; 274 | line-height: 1.1; 275 | } 276 | h4 { 277 | margin-left: 0; 278 | margin-right: 0; 279 | margin-top: 0; 280 | padding-bottom: 0; 281 | padding-left: 0; 282 | padding-right: 0; 283 | padding-top: 0; 284 | margin-bottom: 1.45rem; 285 | color: inherit; 286 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 287 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 288 | font-weight: bold; 289 | text-rendering: optimizeLegibility; 290 | font-size: 1rem; 291 | line-height: 1.1; 292 | } 293 | h5 { 294 | margin-left: 0; 295 | margin-right: 0; 296 | margin-top: 0; 297 | padding-bottom: 0; 298 | padding-left: 0; 299 | padding-right: 0; 300 | padding-top: 0; 301 | margin-bottom: 1.45rem; 302 | color: inherit; 303 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 304 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 305 | font-weight: bold; 306 | text-rendering: optimizeLegibility; 307 | font-size: 0.85028rem; 308 | line-height: 1.1; 309 | } 310 | h6 { 311 | margin-left: 0; 312 | margin-right: 0; 313 | margin-top: 0; 314 | padding-bottom: 0; 315 | padding-left: 0; 316 | padding-right: 0; 317 | padding-top: 0; 318 | margin-bottom: 1.45rem; 319 | color: inherit; 320 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 321 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 322 | font-weight: bold; 323 | text-rendering: optimizeLegibility; 324 | font-size: 0.78405rem; 325 | line-height: 1.1; 326 | } 327 | hgroup { 328 | margin-left: 0; 329 | margin-right: 0; 330 | margin-top: 0; 331 | padding-bottom: 0; 332 | padding-left: 0; 333 | padding-right: 0; 334 | padding-top: 0; 335 | margin-bottom: 1.45rem; 336 | } 337 | ul { 338 | margin-left: 1.45rem; 339 | margin-right: 0; 340 | margin-top: 0; 341 | padding-bottom: 0; 342 | padding-left: 0; 343 | padding-right: 0; 344 | padding-top: 0; 345 | margin-bottom: 1.45rem; 346 | list-style-position: outside; 347 | list-style-image: none; 348 | } 349 | ol { 350 | margin-left: 1.45rem; 351 | margin-right: 0; 352 | margin-top: 0; 353 | padding-bottom: 0; 354 | padding-left: 0; 355 | padding-right: 0; 356 | padding-top: 0; 357 | margin-bottom: 1.45rem; 358 | list-style-position: outside; 359 | list-style-image: none; 360 | } 361 | dl { 362 | margin-left: 0; 363 | margin-right: 0; 364 | margin-top: 0; 365 | padding-bottom: 0; 366 | padding-left: 0; 367 | padding-right: 0; 368 | padding-top: 0; 369 | margin-bottom: 1.45rem; 370 | } 371 | dd { 372 | margin-left: 0; 373 | margin-right: 0; 374 | margin-top: 0; 375 | padding-bottom: 0; 376 | padding-left: 0; 377 | padding-right: 0; 378 | padding-top: 0; 379 | margin-bottom: 1.45rem; 380 | } 381 | p { 382 | margin-left: 0; 383 | margin-right: 0; 384 | margin-top: 0; 385 | padding-bottom: 0; 386 | padding-left: 0; 387 | padding-right: 0; 388 | padding-top: 0; 389 | margin-bottom: 1.45rem; 390 | } 391 | figure { 392 | margin-left: 0; 393 | margin-right: 0; 394 | margin-top: 0; 395 | padding-bottom: 0; 396 | padding-left: 0; 397 | padding-right: 0; 398 | padding-top: 0; 399 | margin-bottom: 1.45rem; 400 | } 401 | pre { 402 | margin-left: 0; 403 | margin-right: 0; 404 | margin-top: 0; 405 | padding-bottom: 0; 406 | padding-left: 0; 407 | padding-right: 0; 408 | padding-top: 0; 409 | margin-bottom: 1.45rem; 410 | font-size: 0.85rem; 411 | line-height: 1.42; 412 | background: hsla(0, 0%, 0%, 0.04); 413 | border-radius: 3px; 414 | overflow: auto; 415 | word-wrap: normal; 416 | padding: 1.45rem; 417 | } 418 | table { 419 | margin-left: 0; 420 | margin-right: 0; 421 | margin-top: 0; 422 | padding-bottom: 0; 423 | padding-left: 0; 424 | padding-right: 0; 425 | padding-top: 0; 426 | margin-bottom: 1.45rem; 427 | font-size: 1rem; 428 | line-height: 1.45rem; 429 | border-collapse: collapse; 430 | width: 100%; 431 | } 432 | fieldset { 433 | margin-left: 0; 434 | margin-right: 0; 435 | margin-top: 0; 436 | padding-bottom: 0; 437 | padding-left: 0; 438 | padding-right: 0; 439 | padding-top: 0; 440 | margin-bottom: 1.45rem; 441 | } 442 | blockquote { 443 | margin-left: 1.45rem; 444 | margin-right: 1.45rem; 445 | margin-top: 0; 446 | padding-bottom: 0; 447 | padding-left: 0; 448 | padding-right: 0; 449 | padding-top: 0; 450 | margin-bottom: 1.45rem; 451 | } 452 | form { 453 | margin-left: 0; 454 | margin-right: 0; 455 | margin-top: 0; 456 | padding-bottom: 0; 457 | padding-left: 0; 458 | padding-right: 0; 459 | padding-top: 0; 460 | margin-bottom: 1.45rem; 461 | } 462 | noscript { 463 | margin-left: 0; 464 | margin-right: 0; 465 | margin-top: 0; 466 | padding-bottom: 0; 467 | padding-left: 0; 468 | padding-right: 0; 469 | padding-top: 0; 470 | margin-bottom: 1.45rem; 471 | } 472 | iframe { 473 | margin-left: 0; 474 | margin-right: 0; 475 | margin-top: 0; 476 | padding-bottom: 0; 477 | padding-left: 0; 478 | padding-right: 0; 479 | padding-top: 0; 480 | margin-bottom: 1.45rem; 481 | } 482 | hr { 483 | margin-left: 0; 484 | margin-right: 0; 485 | margin-top: 0; 486 | padding-bottom: 0; 487 | padding-left: 0; 488 | padding-right: 0; 489 | padding-top: 0; 490 | margin-bottom: calc(1.45rem - 1px); 491 | background: hsla(0, 0%, 0%, 0.2); 492 | border: none; 493 | height: 1px; 494 | } 495 | address { 496 | margin-left: 0; 497 | margin-right: 0; 498 | margin-top: 0; 499 | padding-bottom: 0; 500 | padding-left: 0; 501 | padding-right: 0; 502 | padding-top: 0; 503 | margin-bottom: 1.45rem; 504 | } 505 | b { 506 | font-weight: bold; 507 | } 508 | strong { 509 | font-weight: bold; 510 | } 511 | dt { 512 | font-weight: bold; 513 | } 514 | th { 515 | font-weight: bold; 516 | } 517 | li { 518 | margin-bottom: calc(1.45rem / 2); 519 | } 520 | ol li { 521 | padding-left: 0; 522 | } 523 | ul li { 524 | padding-left: 0; 525 | } 526 | li > ol { 527 | margin-left: 1.45rem; 528 | margin-bottom: calc(1.45rem / 2); 529 | margin-top: calc(1.45rem / 2); 530 | } 531 | li > ul { 532 | margin-left: 1.45rem; 533 | margin-bottom: calc(1.45rem / 2); 534 | margin-top: calc(1.45rem / 2); 535 | } 536 | blockquote *:last-child { 537 | margin-bottom: 0; 538 | } 539 | li *:last-child { 540 | margin-bottom: 0; 541 | } 542 | p *:last-child { 543 | margin-bottom: 0; 544 | } 545 | li > p { 546 | margin-bottom: calc(1.45rem / 2); 547 | } 548 | code { 549 | font-size: 0.85rem; 550 | line-height: 1.45rem; 551 | } 552 | kbd { 553 | font-size: 0.85rem; 554 | line-height: 1.45rem; 555 | } 556 | samp { 557 | font-size: 0.85rem; 558 | line-height: 1.45rem; 559 | } 560 | abbr { 561 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 562 | cursor: help; 563 | } 564 | acronym { 565 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 566 | cursor: help; 567 | } 568 | abbr[title] { 569 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 570 | cursor: help; 571 | text-decoration: none; 572 | } 573 | thead { 574 | text-align: left; 575 | } 576 | td, 577 | th { 578 | text-align: left; 579 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); 580 | font-feature-settings: "tnum"; 581 | -moz-font-feature-settings: "tnum"; 582 | -ms-font-feature-settings: "tnum"; 583 | -webkit-font-feature-settings: "tnum"; 584 | padding-left: 0.96667rem; 585 | padding-right: 0.96667rem; 586 | padding-top: 0.725rem; 587 | padding-bottom: calc(0.725rem - 1px); 588 | } 589 | th:first-child, 590 | td:first-child { 591 | padding-left: 0; 592 | } 593 | th:last-child, 594 | td:last-child { 595 | padding-right: 0; 596 | } 597 | tt, 598 | code { 599 | background-color: hsla(0, 0%, 0%, 0.04); 600 | border-radius: 3px; 601 | font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono", 602 | "Liberation Mono", Menlo, Courier, monospace; 603 | padding: 0; 604 | padding-top: 0.2em; 605 | padding-bottom: 0.2em; 606 | } 607 | pre code { 608 | background: none; 609 | line-height: 1.42; 610 | } 611 | code:before, 612 | code:after, 613 | tt:before, 614 | tt:after { 615 | letter-spacing: -0.2em; 616 | content: " "; 617 | } 618 | pre code:before, 619 | pre code:after, 620 | pre tt:before, 621 | pre tt:after { 622 | content: ""; 623 | } 624 | @media only screen and (max-width: 480px) { 625 | html { 626 | font-size: 100%; 627 | } 628 | } 629 | 630 | a, 631 | a:visited { 632 | color: rgb(28, 165, 79); 633 | text-decoration: none; 634 | } 635 | 636 | a:hover { 637 | color: #0c7533; 638 | text-decoration: underline; 639 | } 640 | -------------------------------------------------------------------------------- /site/src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Helmet from 'react-helmet' 3 | import { StaticQuery, graphql } from 'gatsby' 4 | 5 | import Header from './header' 6 | import './layout.css' 7 | 8 | const Layout = ({ children }) => ( 9 | ( 20 | <> 21 | 28 | 29 | 30 |
31 |
39 | {children} 40 |
41 | 42 | )} 43 | /> 44 | ) 45 | 46 | export default Layout 47 | -------------------------------------------------------------------------------- /site/src/images/gatsby-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/f/react-hooks/3c5b682499b2555a9aa8d8b1245e5c279395c729/site/src/images/gatsby-icon.png -------------------------------------------------------------------------------- /site/src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | 4 | const NotFoundPage = () => ( 5 | 6 |

NOT FOUND

7 |

You just hit a route that doesn't exist... the sadness.

8 | 9 | ) 10 | 11 | export default NotFoundPage 12 | -------------------------------------------------------------------------------- /site/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | import Layout from "../components/layout"; 5 | import hooks from "../../../hooks.json"; 6 | 7 | function compare(hookA, hookB) { 8 | if (hookA.name < hookB.name) return -1; 9 | if (hookA.name > hookB.name) return 1; 10 | return 0; 11 | } 12 | 13 | const sortedHooks = hooks.sort(compare); 14 | 15 | const Hook = styled.div` 16 | margin-bottom: 3rem; 17 | `; 18 | 19 | const RepositoryLink = styled.a` 20 | float: right; 21 | `; 22 | 23 | const Name = styled.h2` 24 | font-family: "Space Mono", monospace; 25 | `; 26 | 27 | const Pre = styled.pre` 28 | padding: 0.6rem; 29 | `; 30 | 31 | const Tag = styled.span` 32 | font-size: 0.8rem; 33 | background: #d9ffab; 34 | border-bottom: 1px solid #b6de86; 35 | padding: 0.5rem 0.8rem; 36 | border-radius: 1rem; 37 | margin-right: 0.5rem; 38 | `; 39 | 40 | const FilterInput = styled.input` 41 | width: 100%; 42 | margin-top: 1rem; 43 | padding: 0.4rem 0.8rem; 44 | font-family: "Roboto", sans-serif; 45 | `; 46 | 47 | const ResultsCount = styled.div` 48 | font-size: 0.7rem; 49 | color: grey; 50 | margin-top: 0.5rem; 51 | margin-bottom: 3rem; 52 | ` 53 | 54 | class IndexPage extends React.Component { 55 | state = { term: "", results: sortedHooks }; 56 | 57 | render() { 58 | const {term, results} = this.state 59 | 60 | return ( 61 | 62 |

63 | Warning: Hooks are currently a React 64 | RFC and{" "} 65 | not ready for production. 66 |

67 |

68 | You can add your hooks by opening a pull-request at{" "} 69 | 70 | https://github.com/nikgraf/react-hooks 71 | 72 | . 73 |

74 | { 77 | this.setState({ 78 | term: value, 79 | results: sortedHooks.filter(hook => 80 | hook.name.toLowerCase().includes(value.toLowerCase()) 81 | ) 82 | }); 83 | }} 84 | placeholder="filter by name" 85 | /> 86 | 87 | Found {results.length} {results.length === 1 ? 'entry' : 'entries'} 88 | 89 | {results.map(hook => ( 90 | 91 | 92 | {hook.repositoryUrl} 93 | 94 | 95 | {hook.name} 96 | 
 97 |                 {hook.importStatement}
 98 |
99 |
100 | {hook.tags.map(tag => ( 101 | {tag} 102 | ))} 103 |
104 | 105 | ))} 106 | 107 | ); 108 | } 109 | } 110 | 111 | export default IndexPage; 112 | --------------------------------------------------------------------------------