{"id":30821205,"url":"https://github.com/letea/react-library","last_synced_at":"2026-04-14T18:33:23.532Z","repository":{"id":138451856,"uuid":"293438581","full_name":"letea/react-library","owner":"letea","description":"A react library.","archived":false,"fork":false,"pushed_at":"2021-01-24T09:29:35.000Z","size":1163,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-18T22:57:29.140Z","etag":null,"topics":["developing","library","npm","todo","working"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/letea.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-09-07T06:14:16.000Z","updated_at":"2023-04-04T21:27:01.000Z","dependencies_parsed_at":"2023-07-24T19:51:09.316Z","dependency_job_id":null,"html_url":"https://github.com/letea/react-library","commit_stats":null,"previous_names":["iamletea/react-library"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/letea/react-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letea%2Freact-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letea%2Freact-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letea%2Freact-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letea%2Freact-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/letea","download_url":"https://codeload.github.com/letea/react-library/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letea%2Freact-library/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31810737,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"ssl_error","status_checked_at":"2026-04-14T18:05:01.765Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developing","library","npm","todo","working"],"created_at":"2025-09-06T10:48:01.067Z","updated_at":"2026-04-14T18:33:23.500Z","avatar_url":"https://github.com/letea.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Library\n\n[![npm version](https://badge.fury.io/js/%40letea%2Freact.svg)](https://badge.fury.io/js/%40letea%2Freact)\n\nA react library for component \u0026 hooks.\n\n[Live Demo](https://codesandbox.io/s/react-with-letea-library-w2p64)\n\n## Install\n\n```bash\nnpm install @letea/react\n```\n\n## Important!!!\n\nIf you want to use components, please make sure your bundler includes the path of the library `node_modules/@letea/react` to handle jsx compiling.\n\n## Contents\n\n### Component\n\n#### Background\n\n* [BackgroundFixedImage](#backgroundfixedimage)\n* [BackgroundGallery](#backgroundgallery)\n* [BackgroundGalleryWithOrientation](#backgroundgallerywithorientation)\n* [BackgroundVideo](#backgroundvideo)\n\n#### Canvas\n\n* [Flashlight](#flashlight)\n* [Lighting](#lighting)\n* [Processing](#processing)\n* [Scratcher](#scratcher)\n\n#### Element\n\n* [ElementInView](#elementinview)\n* [HorizontalScroll](#horizontalscroll)\n* [Marquee](#marquee)\n\n#### Image\n\n* [Gallery](#gallery)\n* [ImageLoader](#imageloader)\n\n#### Layout\n\n* [FullPage](#fullpage)\n* [FullscreenLoading](#fullscreenloading)\n* [LandscapeTip](#landscapetip)\n* [LayoutLoading](#layoutloading)\n* [LayoutTransition](#layouttransition)\n* [Mask](#mask)\n\n#### Media\n\n* [VideoPlayer](#videoplayer)\n\n#### Notification\n\n* [Toast](#toast)\n\n#### Text\n\n* [Clipboard](#clipboard)\n* [Code](#code)\n* [EmbedRunKit](#embedrunkit)\n* [QRCode](#qrcode)\n\n#### Tool\n\n* [FPS](#fps)\n* [Frame](#frame)\n* [RenderCounter](#rendercounter)\n* [WindowSize](#windowsize)\n\n### Hooks\n\n#### Document\n\n* [useDocumentTitle](#usedocumenttitle)\n\n#### Element\n\n* [useElementInView](#useelementinview)\n\n#### Event\n\n* [useEvent](#useevent)\n* [useEvents](#useevents)\n\n#### Form\n\n* [useInputCheckbox](#useinputcheckbox)\n* [useInputNumber](#useinputnumber)\n* [useInputText](#useinputtext)\n* [useKnobs](#useknobs)\n* [useSelect](#useselect)\n\n#### Image\n\n* [useImage](#useimage)\n\n#### Script\n\n* [useScript](#usescript)\n\n#### State\n\n* [useDebounceState](#usedebouncestate)\n* [useThrottleState](#usethrottlestate)\n\n#### Time\n\n* [useCountdown](#usecountdown)\n* [useInterval](#useinterval)\n* [useTimeout](#usetimeout)\n\n#### Window\n\n* [useIsWindowEventTriggering](#useiswindoweventtriggering)\n* [useWindowBlur](#usewindowblur)\n* [useWindowEvent](#usewindowevent)\n* [useWindowEvents](#usewindowevents)\n* [useWindowLoad](#usewindowload)\n* [useWindowOrientation](#usewindoworientation)\n* [useWindowSize](#usewindowsize)\n\n# Component\n\n## Background\n\n## BackgroundFixedImage\n\nAllow you to have a fixed background image. Because of iOS Device does not support background-attachment: fixed.\n\n### props\n\n```js\ndefaultProps = {\n  image: \"\", // required\n};\n\n```\n\n### usage\n\n```js\nimport BackgroundFixedImage from \"@letea/react/components/BackgroundFixedImage\";\n\nfunction Example() {\n  return (\n    \u003c\u003e\n      \u003cBackgroundFixedImage image=\"a.jpg\" /\u003e\n      \u003cYourComponent /\u003e\n    \u003c/\u003e\n  );\n}\n\n```\n\n### Demo\n\n[BackgroundFixedImage](https://storybook.letea.me/?path=/story/playground-components-background--backgroundfixedimage)\n\n### Can I Use\n\n\u003cimg src=\"https://caniuse.bitsofco.de/image/background-attachment.png\" alt=\"\" /\u003e\n\n## BackgroundGallery\n\nA background with a gallery.\n\n### props\n\n```js\ndefaultProps = {\n  images: [], // required\n  duration: 3000, // optional\n  transition: 1000, // optional\n};\n\n```\n\n### usage\n\n```js\nimport BackgroundGallery from \"@letea/react/components/BackgroundGallery\";\n\nfunction Example() {\n  return (\n    \u003cYourComponent\u003e\n      \u003cBackgroundGallery images={[\"a.jpg\", \"b.jpg\", \"c.jpg\"]} /\u003e\n    \u003c/YourComponent\u003e\n  );\n}\n\n```\n\n### Demo\n\n[Ghost of Tsushima](https://storybook.letea.me/?path=/story/playground-websites--ghost-of-tsushima)\n\n## BackgroundGalleryWithOrientation\n\nA background with a gallery feature. Support two types(portrait and landscape).\n\n### props\n\n```js\ndefaultProps = {\n  portraitImages: [], // require\n  landscapeImages: [], // require\n  duration: 3000, // optional\n  transition: 1000, // optional\n};\n\n```\n\n### usage\n\n```js\nimport BackgroundGalleryWithOrientation from \"@letea/react/components/BackgroundGalleryWithOrientation\";\n\nfunction Example() {\n  return (\n    \u003cYourComponent\u003e\n      \u003cBackgroundGallery\n        portraitImages={[\"a.jpg\", \"b.jpg\", \"c.jpg\"]}\n        landscapeImages={[\"a.jpg\", \"b.jpg\", \"c.jpg\"]}\n      /\u003e\n    \u003c/YourComponent\u003e\n  );\n}\n\n```\n\n### Demo\n\n[BackgroundGalleryWithOrientation](https://storybook.letea.me/?path=/story/playground-components-background--backgroundgallery-with-orientation)\n\n## BackgroundVideo\n\nA background with a video.\n\n### props\n\n```js\ndefaultProps = {\n  video: \"\", // required\n  poster: \"\", // optional\n  isFixed: false, // optional, it will be position: absolute; if the value is false.\n};\n\n```\n\n### usage\n\n```js\nimport BackgroundVideo from \"@letea/react/components/BackgroundVideo\";\n\nfunction Example() {\n  return (\n    \u003c\u003e\n      \u003cBackgroundVideo video=\"a.mp4\" isFixed /\u003e\n      \u003cYourComponent /\u003e\n    \u003c/\u003e\n  );\n}\n\n```\n\n### Demo\n\n[TENET](https://storybook.letea.me/?path=/story/playground-websites--tenet)\n\n## Canvas\n\n## Flashlight\n\nA flashlight effect by canvas. You can control the flashlight by mouse/touch move.\n\n### props\n\n```js\ndefaultProps = {\n  defaultMouseX: window.innerWidth / 2, // optional\n  defaultMouseY: window.innerHeight / 2, // optional\n};\n\n```\n\n### usage\n\n```js\nimport Flashlight from \"@letea/react/components/Flashlight\";\n\nfunction Example() {\n  return \u003cFlashlight /\u003e;\n}\n\n```\n\n### Demo\n\n[Flashlight](https://storybook.letea.me/?path=/story/playground-components-canvas--flashlight)\n\n### notes\n\n* Watch out!\n\n## Lighting\n\nA lighting flash effect by canvas.\n\n### usage\n\n```js\nimport Lighting from \"@letea/react/components/Lighting\";\n\nfunction Example() {\n  return \u003cLighting /\u003e;\n}\n\n```\n\n### Demo\n\n[Lighting](https://storybook.letea.me/?path=/story/playground-components-canvas--lighting)\n\n### notes\n\n* You will hate me.\n\n## Processing\n\nAllow you to write p5.js in React.\n\n### props\n\n```js\ndefaultProps = {\n  sketch: null, // (p5) =\u003e { /* your code */ }\n  hasSoundLibrary: false, // Using p5.sound library or not\n  isIgnoreLoadingMessage: false, // Ignore Loading Message or not\n  isPositionFixed: false, // CSS default is absolute position\n  zIndex: null, // CSS default is 0\n};\n\n```\n\n### usage\n\n```js\nimport Processing from \"@letea/react/components/Processing\";\n\nfunction Example() {\n  const sketch = (p5) =\u003e {\n    p5.setup = () =\u003e {\n      p5.createCanvas(p5.windowWidth, p5.windowHeight);\n      p5.background(0);\n    };\n\n    p5.draw = () =\u003e {\n      p5.ellipse(p5.mouseX, p5.mouseY, 50, 50);\n    };\n  };\n\n  return \u003cProcessing sketch={sketch} /\u003e;\n}\n\n```\n\n### Demo\n\n[Processing](https://storybook.letea.me/?path=/story/components-canvas-4--processing)\n\n### notes\n\n* If you want to create a canvas full fill with parent element, use \"p5.canvas.parentElement\" to get width and height.\n* If you want to use Amplitude from p5.sound, use window\\.p5 instead of p5 from parameter.\n\n## Scratcher\n\nA scratcher effect by canvas.\n\n### usage\n\n```js\nimport Scratcher from \"@letea/react/components/Scratcher\";\n\nfunction Example() {\n  return (\n    \u003c\u003e\n      \u003cYourComponent /\u003e\n      \u003cScratcher /\u003e\n    \u003c/\u003e\n  );\n}\n\n```\n\n### Demo\n\n[Scratcher](https://storybook.letea.me/?path=/story/components-canvas-4--scratcher)\n\n## Element\n\n## ElementInView\n\nTo detect if the element is in the view of the browser. It will pass the \"isInView\" variable to children.\n\n### props\n\n```js\ndefaultProps = {\n  isDebug: false, // optional, will return size of window, bounding client rect of element and position if value is true.\n  hasPosition: false, // optional, will return *xAxis and *yAxis if value is true. (the unit is percentage, xAxis is from left to right, yAxis is from top to bottom)\n  offsetTop: 0, // optional, to set offset *top for element in view. (the unit is percentage, the value is relative to element's height)\n  offsetRight: 0, // optional, to set offset *right for element in view. (the unit is percentage, the value is relative to element's width)\n  offsetBottom: 0, // optional, to set offset *bottom for element in view. (the unit is percentage, the value is relative to element's height)\n  offsetLeft: 0, // optional, to set offset *left for element in view. (the unit is percentage, the value is relative to element's width)\n  onReady: () =\u003e {}, // optional, trigger when component is ready.\n  onMove: () =\u003e {}, // optional, trigger when component moving.\n  onEnter: () =\u003e {}, // optional, trigger when component enter the browser's view.\n  onLeave: () =\u003e {}, // optional, trigger when component leave the browser's view.\n};\n\n```\n\n### usage\n\n```js\nimport ElementInView from \"@letea/react/components/ElementInView\";\n\nfunction Example() {\n  return (\n    \u003cElementInView hasPosition\u003e\n      \u003cTargetElement /\u003e\n    \u003c/ElementInView\u003e\n  );\n}\n\n```\n\n### Demo\n\n[ElementInView](https://storybook.letea.me/?path=/story/playground-components-element--elementinview)\n\n## HorizontalScroll\n\nA horizontal scroll effect for mobile devices.\n\n### props\n\n```js\ndefaultProps = {\n  hideScrollbar: true, // optional\n};\n\n```\n\n### usage\n\n```js\nimport HorizontalScroll from \"@letea/react/components/HorizontalScroll\";\n\nfunction Example() {\n  return (\n    \u003cHorizontalScroll\u003e\n      \u003cYourElement /\u003e\n      \u003cYourElement /\u003e\n      \u003cYourElement /\u003e\n      \u003cYourElement /\u003e\n      \u003cYourElement /\u003e\n    \u003c/HorizontalScroll\u003e\n  );\n}\n\n```\n\n### Demo\n\n[HorizontalScroll](https://storybook.letea.me/?path=/story/components-element-3--horizontalscroll)\n\n### notes\n\n* The children should be display: 'inline-block' or 'inline-flex'.\n* iOS hide scrollbar natively.\n\n## Marquee\n\nA marquee slider.\n\n### props\n\n```js\ndefaultProps = {\n  animationDuration: 40000, // optional, the unit is millisecond.\n  isPausedOnHover: false, // optional\n};\n\n```\n\n### usage\n\n```js\nimport Marquee from \"@letea/react/components/Marquee\";\n\nfunction Example() {\n  return (\n    \u003cMarquee animationDuration={40000}\u003e\n      \u003cYourElement /\u003e\n      \u003cYourElement /\u003e\n      \u003cYourElement /\u003e\n      \u003cYourElement /\u003e\n      \u003cYourElement /\u003e\n    \u003c/Marquee\u003e\n  );\n}\n\n```\n\n### Demo\n\n[Marquee](https://storybook.letea.me/?path=/story/components-element-3--marquee)\n\n### notes\n\n* The children should be 'display: inline-block' or 'inline-flex'.\n\n## Image\n\n## Gallery\n\nA simple gallery.\n\n### props\n\n```js\ndefaultProps = {\n  images: [], // required\n  duration: 3000, // optional\n  transition: 1000, // optional\n};\n\n```\n\n### usage\n\n```js\nimport Gallery from \"@letea/react/components/Gallery\";\n\nfunction Example() {\n  return \u003cGallery images={[\"a.jpg\", \"b.jpg\", \"c.jpg\"]} /\u003e;\n}\n\n```\n\n### Demo\n\n[Gallery](https://storybook.letea.me/?path=/story/components-image-2--gallery)\n\n## ImageLoader\n\nA component loads images and gives you a callback when images are loaded.\n\n### props\n\n```js\ndefaultProps = {\n  images: [], // required\n  onEachLoad: (loadedImages) =\u003e {}, // optional\n  onAllLoad: (loadedImages) =\u003e {}, // optional\n};\n\n```\n\n### usage\n\n```js\nimport ImageLoader from \"@letea/react/components/ImageLoader\";\n\nfunction Example() {\n  return (\n    \u003cImageLoader\n      images={[\"a.jpg\", \"b.jpg\", \"c.jpg\"]}\n      onEachLoad={(loadedImages) =\u003e {\n        // Do something...\n      }}\n      onAllLoad={(loadedImages) =\u003e {\n        // Do something...\n      }}\n    /\u003e\n  );\n}\n\n```\n\n### Demo\n\n[ImageLoader](https://storybook.letea.me/?path=/story/components-image-2--imageloader)\n\n## Layout\n\n## FullPage\n\nCreate a full-page layout and keeps the height of content is equal to or greater than the height of the window.\n\n### props\n\n```js\ndefaultProps = {\n  isDebug: false, // optional, it will display contrastive colors if the value is true.\n  enableMinWidth: 0, // optional\n  offsetHeight: 0, // optional, to adjust the size of height.\n  paddingTop: 0, // optional, add padding top to content.\n  paddingBottom: 0, // optional, add padding bottom to content.\n};\n\n```\n\n### usage\n\n```js\nimport FullPage from \"@letea/react/components/FullPage\";\n\nfunction Example() {\n  return (\n    \u003cFullPage\u003e\n      \u003cYourComponent /\u003e\n    \u003c/FullPage\u003e\n  );\n}\n\n```\n\n### Demo\n\n[FullPage](https://storybook.letea.me/?path=/story/playground-components-layout--fullpage)\n\n## FullscreenLoading\n\nDisplay a fullscreen loading.\n\n### props\n\n```js\n// openFullscreenLoading\ndefaultProps = {\n  Spinner: null, // Your spinner component\n  zIndex: 9999, // optional\n  backgroundColor: \"rgba(0, 0, 0, 0.75)\", // optional\n  onClick: () =\u003e {}, // optional\n};\n\n// closeFullscreenLoading\ndefaultProps = {};\n\n```\n\n### usage\n\n```js\nimport FullscreenLoading from \"@letea/react/components/FullscreenLoading\";\n\nfunction Example() {\n  return (\n    \u003c\u003e\n      \u003cYourComponent\n        onClick={() =\u003e {\n          openFullscreenLoading();\n        }}\n      /\u003e\n      \u003cYourComponent\n        onClick={() =\u003e {\n          closeFullscreenLoading();\n        }}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n\n```\n\n### Demo\n\n[FullscreenLoading](https://storybook.letea.me/?path=/story/components-layout-6--fullscreenloading)\n\n## LandscapeTip\n\nSometimes you want to hint users something. For example, browsing on the mobile web in the landscape is suck.\n\n### props\n\n```js\ndefaultProps = {\n  message: \"\", // optional\n  zIndex: 9999, // optional\n};\n\n```\n\n### usage\n\n```js\nimport LandscapeTip from \"@letea/react/components/LandscapeTip\";\n\nfunction Example() {\n  return \u003cLandscapeTip message=\"Hello World!\" /\u003e;\n}\n\n```\n\n### Demo\n\n[LandscapeTip](https://storybook.letea.me/?path=/story/playground-components-layout--landscapetip)\n\n## LayoutLoading\n\nIt's a layout of loading(load images), allow you to get user \\*permissions by click/touch after loaded. (ex. Autoplay video/audio with sound, vibrate API)\n\n### props\n\n```js\ndefaultProps = {\n  images: [], // optional\n  getUserPermission: false, // optional\n  onLoad: () =\u003e {}, // optional\n  zIndex: 9999, // optional\n  isFixed: true, // optional\n};\n\n```\n\n### usage\n\n```js\nimport LayoutLoading from \"@letea/react/components/LayoutLoading\";\n\nfunction Example() {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  return (\n    \u003c\u003e\n      {!isLoaded \u0026\u0026 (\n        \u003cLayoutLoading\n          images={[\"a.jpg\", \"b.jpg\", \"c.jpg\"]}\n          getUserPermission\n          onLoad={() =\u003e {\n            setIsLoaded(true);\n          }}\n        /\u003e\n      )}\n      {isLoaded \u0026\u0026 \u003cYourComponent /\u003e}\n    \u003c/\u003e\n  );\n}\n\n```\n\n### Demo\n\n[LayoutLoading](https://storybook.letea.me/?path=/story/components-layout-6--layoutloading)\n\n## LayoutTransition\n\nA layout of transition.\n\n### props\n\n```js\ndefaultProps = {\n  start: false, // required\n  url: \"\", // required\n  duration: 1000, // optional, value of animation-duration, unit is millisecond.\n  frames: 0, // optional, value of animation-timing-function\n  reverse: false, // optional, value of animation-direction\n  infinite: false, // optional, value of animation-iteration-count\n  forwards: false, // optional, value of animation-fill-mode\n  onFinish: null, // optional, trigger on animation end.\n};\n\n```\n\n### usage\n\n```js\nimport LayoutTransition from \"@letea/react/components/LayoutTransition\";\n\nfunction Example() {\n  return (\n    \u003cLayoutTransition\n      start={true}\n      url={\"a.jpg\"}\n      duration={1000}\n      frames={22}\n      reverse={false}\n      infinite={false}\n      forwards={false}\n      onFinish={() =\u003e {\n        // do something...\n      }}\n    /\u003e\n  );\n}\n\n```\n\n### Demo\n\n[LayoutTransition](https://storybook.letea.me/?path=/story/components-layout-6--layouttransition)\n\n## Mask\n\nA mask covers the layout.\n\n### props\n\n```js\ndefaultProps = {\n  isFixed: false, // optional\n  zIndex: 9999, // optional\n};\n\n```\n\n### usage\n\n```js\nimport Mask from \"@letea/react/components/Mask\";\n\nfunction Example() {\n  return (\n    \u003c\u003e\n      \u003cYourComponent /\u003e\n      \u003cMask /\u003e\n    \u003c/\u003e\n  );\n}\n\n```\n\n### Demo\n\n[Mask](https://storybook.letea.me/?path=/story/components-layout-6--mask)\n\n## Media\n\n## VideoPlayer\n\nA video player uses the native interface.\n\n### props\n\n```js\ndefaultProps = {\n  src: \"\", // required\n  poster: \"\", // optional\n  hasControls: false, // optional\n  hasContextMenu: false, // optional\n  hasPreload: true, // optional\n  isAutoPlay: false, // optional\n  isPlaysInline: false, // optional\n  isMuted: false, // optional\n  isLoop: false, // optional\n  isPauseOnBlur: false, // optional\n  isCoverSize: false, // optional\n  onCanPlay: (event) =\u003e {}, // optional\n  onError: (event) =\u003e {}, // optional\n  onPlay: (event) =\u003e {}, // optional\n  onPlaying: (event) =\u003e {}, // optional\n  onTimeUpdate: (event) =\u003e {}, // optional\n  onPause: (event) =\u003e {}, // optional\n  onEnded: (event) =\u003e {}, // optional\n  onVolumeChange: (event) =\u003e {}, // optional\n  onFullscreen: () =\u003e {}, // optional\n  onFullscreenExit: () =\u003e {}, // optional\n};\n\n```\n\n### usage\n\n```js\nimport VideoPlayer from \"@letea/react/components/VideoPlayer\";\n\nfunction Example() {\n  return \u003cVideoPlayer src=\"a.mp4\" /\u003e;\n}\n\n```\n\n### Demo\n\n[VideoPlayer](https://storybook.letea.me/?path=/story/components-media-1--videoplayer)\n\n## Notification\n\n## Toast\n\nDisplay a message at the corner.\n\n### usage\n\n```js\nimport Toast from \"@letea/react/components/Toast\";\n\nfunction Example() {\n  return (\n    \u003c\u003e\n      \u003cYourComponent\n        onClick={() =\u003e {\n          toast(\"Hello There\");\n        }}\n      /\u003e\n      \u003cYourComponent\n        onClick={() =\u003e {\n          toast({ message: \"Hello There\", duration: 1500 });\n        }}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n\n```\n\n### Demo\n\n[Toast](https://storybook.letea.me/?path=/story/components-notification-1--toast)\n\n## Text\n\n## Clipboard\n\nAllow users to copy text.\n\n### props\n\n```js\ndefaultProps = {\n  text: \"\", // optional\n  isDebugMode: false, // optional\n  onSuccess: () =\u003e {}, // optional\n  onFail: () =\u003e {}, // optional\n};\n\n```\n\n### usage\n\n```js\nimport Clipboard from \"@letea/react/components/Clipboard\";\n\nfunction Example() {\n  return \u003cClipboard text=\"Hello World!\"\u003eCopy Text\u003c/Clipboard\u003e;\n}\n\n```\n\n### Demo\n\n[Clipboard](https://storybook.letea.me/?path=/story/components-text-4--clipboard)\n\n### references\n\n* [clipboard.js](https://clipboardjs.com/)\n\n## Code\n\nDisplay source code with syntax highlight.\n\n### props\n\n```js\ndefaultProps = {\n  code: \"\", // required\n};\n\n```\n\n### usage\n\n```js\nimport Code from \"@letea/react/components/Code\";\n\nfunction Example() {\n  return \u003cCode code=\"console.log('Hello World!');\" /\u003e;\n}\n\n```\n\n### Demo\n\n[Code](https://storybook.letea.me/?path=/story/components-text-4--code)\n\n### notes\n\n* Import Hack Typeface in the head of HTML for the best experience.\n\n### references\n\n* [highlight.js](https://highlightjs.org/)\n* [Hack](https://sourcefoundry.org/hack/)\n\n## EmbedRunKit\n\nAllow you to test javascript code via RunKit.\n\n### usage\n\n```js\nimport EmbedRunKit from \"@letea/react/components/EmbedRunKit\";\n\nfunction Example() {\n  return \u003cEmbedRunKit source=\"console.log('Hello World!')\" /\u003e;\n}\n\n```\n\n### Demo\n\n[EmbedRunKit](https://storybook.letea.me/?path=/story/components-text-4--embedrunkit)\n\n## QRCode\n\nConvert text to QR code.\n\n### props\n\n```js\ndefaultProps = {\n  text: \"\", // optional\n  width: 150, // optional\n  height: 150, // optional\n};\n\n```\n\n### usage\n\n```js\nimport QRCode from \"@letea/react/components/QRCode\";\n\nfunction Example() {\n  return \u003cQRCode text=\"Hello World!\" /\u003e;\n}\n\n```\n\n### Demo\n\n[QRCode](https://storybook.letea.me/?path=/story/components-text-4--qrcode)\n\n### references\n\n* [QR Code Generator](http://goQR.me)\n\n## Tool\n\n## FPS\n\nDisplay FPS(Frame per Second).\n\n### props\n\n```js\ndefaultProps = {\n  isFixed: false, // optional, default position is absolute.\n  zIndex: 9999, // optional\n};\n\n```\n\n### usage\n\n```js\nimport FPS from \"@letea/react/components/FPS\";\n\nfunction Example() {\n  return \u003cFPS /\u003e;\n}\n\n```\n\n### Demo\n\n[FPS](https://storybook.letea.me/?path=/story/components-tool-4--fps)\n\n## Frame\n\nDisplay frame for developing layout, style is base on Storybook.\n\n### props\n\n```js\ndefaultProps = {\n  isFixed: false, // optional, default position is absolute.\n  zIndex: -1, // optional\n};\n\n```\n\n### usage\n\n```js\nimport Frame from \"@letea/react/components/Frame\";\n\nfunction Example() {\n  return \u003cFrame /\u003e;\n}\n\n```\n\n### Demo\n\n[Frame](https://storybook.letea.me/?path=/story/components-tool-4--frame)\n\n### references\n\n* [Storybook](https://storybook.js.org/)\n\n## RenderCounter\n\nDisplay render counts.\n\n### usage\n\n```js\nimport RenderCounter from \"@letea/react/components/RenderCounter\";\n\nfunction Example() {\n  return (\n    \u003cRenderCounter\u003e\n      \u003cYourComponent /\u003e\n    \u003c/RenderCounter\u003e\n  );\n}\n\n```\n\n### Demo\n\n[RenderCounter](https://storybook.letea.me/?path=/story/components-tool-4--rendercounter)\n\n## WindowSize\n\nDisplay the size of the window, base on Chrome's inspect style.\n\n### props\n\n```js\ndefaultProps = {\n  isFixed: true, // optional\n  zIndex: 9999, // optional\n  autoHide: false, // optional\n  hideDelay: 1000, // optional, it will enable if audHide is true.\n};\n\n```\n\n### usage\n\n```js\nimport WindowSize from \"@letea/react/components/WindowSize\";\n\nfunction Example() {\n  return \u003cWindowSize /\u003e;\n}\n\n```\n\n### Demo\n\n[WindowSize](https://storybook.letea.me/?path=/story/components-tool-4--windowsize)\n\n# Hooks\n\n## Document\n\n## useDocumentTitle\n\nAllow you to get or update the title of the document.\n\n### usage\n\n```js\nimport useDocumentTitle from \"@letea/react/hooks/useDocumentTitle\";\n\nconst [title, setTitle] = useDocumentTitle();\n\n```\n\n### Demo\n\n[useDocumentTitle](https://storybook.letea.me/?path=/story/hooks-document-1--usedocumenttitle)\n\n## Element\n\n## useElementInView\n\nTo detect if the element is in the view of the browser.\n\n### usage\n\n```js\nimport useElementInView from \"@letea/react/hooks/useElementInView\";\n\n// Basic\nconst element = useElementInView({\n  target: targetRef,\n});\n// element =\u003e {\n//   isInView // check is element in view.\n// }\n\n// Basic with Position\nconst element = useElementInView({\n  target: targetRef,\n  hasPosition: true,\n});\n// element =\u003e {\n//   isInView,\n//   xAxis, =\u003e the xAxis of element.\n//   yAxis  =\u003e the yAxis of element.\n// }\n\n// Debug\nconst element = useElementInView({\n  target: targetRef,\n  isDebug: true,\n});\n// element =\u003e {\n//   isInView,\n//   xAxis,\n//   yAxis,\n//   windowWidth, =\u003e the width of window.\n//   windowHeight, =\u003e the height of window.\n//   top, =\u003e the top of element.\n//   right, =\u003e the right of element.\n//   bottom, =\u003e the bottom of element.\n//   left, =\u003e the left of element.\n//   width, =\u003e the width of element.\n//   height =\u003e the height of element.\n// }\n\n```\n\n### Demo\n\n[useElementInView](https://storybook.letea.me/?path=/story/playground-hooks-element--useelementinview)\n\n## Event\n\n## useEvent\n\nAdd an event to an element. You don't need to remove it manually.\n\n### usage\n\n```js\nimport useEvent from \"@letea/react/hooks/useEvent\";\n\nuseEvent({\n  eventName: \"click\",\n  target: targetRef,\n  callback: () =\u003e {\n    // Do something...\n  },\n});\n\n```\n\n### Demo\n\n[useEvent](https://storybook.letea.me/?path=/story/hooks-event-2--useevent)\n\n## useEvents\n\nAdd multiple events to elements. You don't need to remove it manually. The best part is you can let events share a/an method/element or use each of the methods/elements.\n\n### usage\n\n```js\nimport useEvents from \"@letea/react/hooks/useEvents\";\n\nuseEvents({\n  eventNames: [\"mousedown\", \"mouseup\"],\n  targets: [aRef],\n  callbacks: [\n    () =\u003e {\n      // Do something for mousedown \u0026 mouseup\n    },\n  ],\n});\n// Trigger when mousedown or mouseup, share with a function and an element.\n\nuseEvents({\n  eventNames: [\"mousedown\", \"mouseup\"],\n  targets: [aRef],\n  callbacks: [\n    () =\u003e {\n      // Do something for mousedown event.\n    },\n    () =\u003e {\n      // Do something for mouseup event.\n    },\n  ],\n});\n// Trigger when mousedown or mouseup, use each of functions, share with an element.\n\n```\n\n### Demo\n\n[useEvents](https://storybook.letea.me/?path=/story/hooks-event-2--useevents)\n\n### notes\n\n* The length of eventNames should be equal to or greater than targets and callbacks.\n\n## Form\n\n## useInputCheckbox\n\nAllow you to get or update the value of the checkbox.\n\n### usage\n\n```js\nimport useInputCheckbox from \"@letea/react/hooks/useInputCheckbox\";\n\nfunction Example() {\n  const [value, setValue] = useInputCheckbox(false);\n\n  return \u003cinput type=\"checkbox\" defaultValue={value} onChange={setValue} /\u003e;\n}\n\n```\n\n### Demo\n\n[useInputCheckbox](https://storybook.letea.me/?path=/story/hooks-form-5--useinputcheckbox)\n\n## useInputNumber\n\nAllow you to get or update the value of the input.\n\n### usage\n\n```js\nimport useInputNumber from \"@letea/react/hooks/useInputNumber\";\n\nfunction Example() {\n  const [value, setValue] = useInputNumber(0);\n\n  return \u003cinput type=\"number\" defaultValue={value} onChange={setValue} /\u003e;\n}\n\n```\n\n### Demo\n\n[useInputNumber](https://storybook.letea.me/?path=/story/hooks-form-5--useinputnumber)\n\n## useInputText\n\nAllow you to get or update the value of the input.\n\n### usage\n\n```js\nimport useInputText from \"@letea/react/hooks/useInputText\";\n\nfunction BasicExample() {\n  const [value, setValue] = useInputText(\"Message\");\n\n  return \u003cinput type=\"text\" defaultValue={value} onChange={setValue} /\u003e;\n}\n\nfunction AdvanceExample() {\n  const [value, setValue] = useInputText({\n    defaultValue: Message,\n    hasDebounce: true,\n    debounceTime: 600,\n  });\n\n  return \u003cinput type=\"text\" defaultValue={value} onChange={setValue} /\u003e;\n}\n\n```\n\n### Demo\n\n[useInputText](https://storybook.letea.me/?path=/story/hooks-form-5--useinputtext)\n\n### notes\n\n* If you want to use a checkbox, check out the useInputCheckbox.\n\n## useKnobs\n\nAllow you to create a value control easily. The idea is base on Storybook addon-knobs.\n\n### usage\n\n```js\nimport useKnobs from \"@letea/react/hooks/useKnobs\";\n\nfunction Example() {\n  const textValue = text({ defaultValue: \"Message\", label: \"Text\" });\n  const numberValue = number({ defaultValue: 0, label: \"Number\" });\n  const booleanValue = boolean({ defaultValue: false, label: \"Boolean\" });\n  const { value: selectValue, index: selectIndex } = select({\n    options: [\"Apple\", \"Banana\", \"Piapple\"],\n    label: \"Select\",\n  });\n\n  button({\n    label: \"Button\",\n    handler: () =\u003e {\n      // Do something...\n    },\n  });\n\n  return (\n    \u003cdiv\u003e\n      {`Text: ${textValue}`}\n      \u003cbr /\u003e\n      {`Number: ${numberValue}`}\n      \u003cbr /\u003e\n      {`Boolean: ${booleanValue}`}\n      \u003cbr /\u003e\n      {`Select Value: ${selectValue}`}\n      \u003cbr /\u003e\n      {`Select Index: ${selectIndex}`}\n      \u003chr /\u003e\n      \u003cKnobsContainer /\u003e\n    \u003c/div\u003e\n  );\n}\n\n```\n\n### Demo\n\n[useKnobs](https://storybook.letea.me/?path=/story/hooks-form-5--useknobs)\n\n### references\n\n* [Storybook Addon Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs)\n\n## useSelect\n\nAllow you to get or update the index of the select.\n\n### usage\n\n```js\nimport useSelect from \"@letea/react/hooks/useSelect\";\n\nfunction Example() {\n  const [index, setIndex] = useSelect(0);\n\n  return (\n    \u003cselect onChange={setIndex}\u003e\n      \u003coption\u003ea\u003c/option\u003e\n      \u003coption\u003eb\u003c/option\u003e\n      \u003coption\u003ec\u003c/option\u003e\n    \u003c/select\u003e\n  );\n}\n\n```\n\n### Demo\n\n[useSelect](https://storybook.letea.me/?path=/story/hooks-form-5--useselect)\n\n## Image\n\n## useImage\n\nGet an image with status.\n\n### usage\n\n```js\nimport useImage from \"@letea/react/hooks/useImage\";\n\nconst [image, status] = useImage({\n  url: \"https://www.example.com/sample.jpg\",\n});\n// image =\u003e \"https://www.example.com/sample.jpg\"\n// status =\u003e \"loading\", \"loaded\", \"failed\"\n\n```\n\n### Demo\n\n[useImage](https://storybook.letea.me/?path=/story/hooks-image-1--useimage)\n\n## Script\n\n## useScript\n\nAllow you to load script with URL.\n\n### usage\n\n```js\nimport useScript from \"@letea/react/hooks/useScript\";\n\nconst isScriptLoaded = useScript(\"https://cdn.jsdelivr.net/npm/sweetalert2@10\");\n\n```\n\n### Demo\n\n[useScript](https://storybook.letea.me/?path=/story/hooks-script-1--usescript)\n\n### notes\n\n* Base on useScript from useHooks.\n\n### references\n\n* [useScript React Hook - useHooks](https://usehooks.com/useScript/)\n\n## State\n\n## useDebounceState\n\nuseState with debounce!\n\n### usage\n\n```js\nimport useDebounceState from \"@letea/react/hooks/useDebounceState\";\n\nconst [value, setValue] = useDebounceState({\n  defaultValue: \"Apple\",\n});\n\nsetValue(\"Banana\");\n\n```\n\n### Demo\n\n[useDebounceState](https://storybook.letea.me/?path=/story/hooks-state-2--usedebouncestate)\n\n## useThrottleState\n\nuseState with throttle!\n\n### usage\n\n```js\nimport useThrottleState from \"@letea/react/hooks/useThrottleState\";\n\nconst [value, setValue] = useThrottleState({\n  defaultValue: \"Apple\",\n});\n\nsetValue(\"Banana\");\n\n```\n\n### Demo\n\n[useThrottleState](https://storybook.letea.me/?path=/story/hooks-state-2--usethrottlestate)\n\n## Time\n\n## useCountdown\n\nCreate a countdown.\n\n### usage\n\n```js\nimport useCountdown from \"@letea/react/hooks/useCountdown\";\n\nconst [counts, isFinish] = useCountdown({\n  defaultCounts: 999,\n  speed: 1000,\n  formatToHHMMSS: false,\n});\n// counts =\u003e 999\n// isFinish =\u003e false, true\n\n```\n\n### Demo\n\n[useCountdown](https://storybook.letea.me/?path=/story/hooks-time-3--usecountdown)\n\n## useInterval\n\nAllow you to use setInterval without handle clearInterval.\n\n### usage\n\n```js\nimport useInterval from \"@letea/react/hooks/useInterval\";\n\nuseInterval({\n  callback: () =\u003e {\n    // Do something...\n  },\n  duration: 1000,\n  startInterval: true,\n});\n\n```\n\n### Demo\n\n[useInterval](https://storybook.letea.me/?path=/story/hooks-time-3--useinterval)\n\n## useTimeout\n\nAllow you to use setTimeout without handle clearTimeout.\n\n### usage\n\n```js\nimport useTimeout from \"@letea/react/hooks/useTimeout\";\n\nuseTimeout({\n  callback: () =\u003e {\n    // Do something...\n  },\n  duration: 1000,\n  startTimeout: true,\n});\n\n```\n\n### Demo\n\n[useTimeout](https://storybook.letea.me/?path=/story/hooks-time-3--usetimeout)\n\n## Window\n\n## useIsWindowEventTriggering\n\nGet a value to check if the event of the window is triggering or not.\n\n### usage\n\n```js\nimport useIsWindowEventTriggering from \"@letea/react/hooks/useIsWindowEventTriggering\";\n\nconst isResizing = useIsWindowEventTriggering({\n  eventName: \"resize\",\n  duration: 1500,\n});\n// isResizing =\u003e true, false\n\n```\n\n### Demo\n\n[useIsWindowEventTriggering](https://storybook.letea.me/?path=/story/hooks-window-7--useiswindoweventtriggering)\n\n## useWindowBlur\n\nGet a value to check if the window is blurred or not.\n\n### usage\n\n```js\nimport useWindowBlur from \"@letea/react/hooks/useWindowBlur\";\n\nconst isWindowBlurred = useWindowBlur();\n// isWindowLoaded =\u003e true, false\n\n```\n\n### Demo\n\n[useWindowBlur](https://storybook.letea.me/?path=/story/hooks-window-7--usewindowblur)\n\n## useWindowEvent\n\nAdd an event of window, you don't need to remove it manually.\n\n### usage\n\n```js\nimport useWindowEvent from \"@letea/react/hooks/useWindowEvent\";\n\nuseWindowEvent({\n  eventName: \"click\",\n  callback: () =\u003e {\n    // Do something...\n  },\n});\n\n```\n\n### Demo\n\n[useWindowEvent](https://storybook.letea.me/?path=/story/hooks-window-7--usewindowevent)\n\n## useWindowEvents\n\nAdd multiple events to the window. You don't need to remove it manually. The best part is you can let events share a method or use each of the methods.\n\n### usage\n\n```js\nimport useWindowEvents from \"@letea/react/hooks/useWindowEvents\";\n\nuseWindowEvents({\n  eventNames: [\"mousedown\", \"mouseup\"],\n  callbacks: [\n    () =\u003e {\n      // Do something...\n    },\n  ],\n});\n// Trigger when mousedown or mouseup, share with a method.\n\nuseWindowEvents({\n  eventNames: [\"mousedown\", \"mouseup\"],\n  callbacks: [\n    () =\u003e {\n      // Do something for mousedown event.\n    },\n    () =\u003e {\n      // Do something for mouseup event.\n    },\n  ],\n});\n// Trigger when mousedown or mouseup, use each of methods.\n\n```\n\n### Demo\n\n[useWindowEvents](https://storybook.letea.me/?path=/story/hooks-window-7--usewindowevents)\n\n## useWindowLoad\n\nGet a value to check if the window is loaded or not.\n\n### usage\n\n```js\nimport useWindowLoad from \"@letea/react/hooks/useWindowLoad\";\n\nconst isWindowLoaded = useWindowLoad();\n// isWindowLoaded =\u003e true, false\n\n```\n\n### Demo\n\n[useWindowLoad](https://storybook.letea.me/?path=/story/hooks-window-7--usewindowload)\n\n## useWindowOrientation\n\nGet the orientation of the window, including the resized window.\n\n### usage\n\n```js\nimport useWindowOrientation from \"@letea/react/hooks/useWindowOrientation\";\n\nconst { isLandscape, isPortrait } = useWindowOrientation();\n// isLandscape =\u003e true\n// isPortrait =\u003e false\n\n```\n\n### Demo\n\n[useWindowOrientation](https://storybook.letea.me/?path=/story/hooks-window-7--usewindoworientation)\n\n## useWindowSize\n\nGet the size of the window, including the resized window.\n\n### usage\n\n```js\nimport useWindowSize from \"@letea/react/hooks/useWindowSize\";\n\nconst { windowWidth, windowHeight } = useWindowSize();\n// windowWidth =\u003e 1920\n// windowHeight =\u003e 1080\n\n```\n\n### Demo\n\n[useWindowSize](https://storybook.letea.me/?path=/story/hooks-window-7--usewindowsize)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletea%2Freact-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fletea%2Freact-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletea%2Freact-library/lists"}