{"id":26258454,"url":"https://github.com/vydimitrov/react-random-reveal","last_synced_at":"2025-04-09T13:09:09.042Z","repository":{"id":40695420,"uuid":"248448372","full_name":"vydimitrov/react-random-reveal","owner":"vydimitrov","description":"React/React Native component and hook to add a little thrill before revealing the truth via random character animation","archived":false,"fork":false,"pushed_at":"2024-11-18T22:48:59.000Z","size":1071,"stargazers_count":38,"open_issues_count":1,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-02T12:07:59.410Z","etag":null,"topics":["animation","component","hooks","random","react","react-native","reveal"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vydimitrov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-19T08:25:07.000Z","updated_at":"2024-12-21T23:36:42.000Z","dependencies_parsed_at":"2024-06-19T01:36:57.621Z","dependency_job_id":"74347cda-9c85-4956-acd6-729b87ce8d95","html_url":"https://github.com/vydimitrov/react-random-reveal","commit_stats":{"total_commits":42,"total_committers":3,"mean_commits":14.0,"dds":0.5714285714285714,"last_synced_commit":"967e91e9058f90eae4a35cbb911c86d539cb47a8"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vydimitrov%2Freact-random-reveal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vydimitrov%2Freact-random-reveal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vydimitrov%2Freact-random-reveal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vydimitrov%2Freact-random-reveal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vydimitrov","download_url":"https://codeload.github.com/vydimitrov/react-random-reveal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045233,"owners_count":21038553,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["animation","component","hooks","random","react","react-native","reveal"],"created_at":"2025-03-13T21:45:28.473Z","updated_at":"2025-04-09T13:09:09.010Z","avatar_url":"https://github.com/vydimitrov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Random Reveal\n\n[![npm](https://img.shields.io/npm/v/react-random-reveal)](https://www.npmjs.com/package/react-random-reveal)\n[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vydimitrov/react-random-reveal/Codecov%20Coverage)](https://codecov.io/gh/vydimitrov/react-random-reveal)\n[![Codecov](https://img.shields.io/codecov/c/gh/vydimitrov/react-random-reveal)](https://codecov.io/gh/vydimitrov/react-random-reveal)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-random-reveal)](https://bundlephobia.com/result?p=react-random-reveal)\n\nReact/React Native component and hook to add a little thrill before revealing the truth. This effect is achieved via a character animation that shows random characters before revealing the text you want to emphasize. The library provides full control over the reveal run: its duration and easing can be freely adjusted.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/10707142/77891767-c3332000-7271-11ea-9ba8-b2de048cad32.gif\"\u003e\n\n📜 Animate random letters, numbers, emojis, words or components  \n🏆 Performance optimized with single `requestAnimationFrame` loop to animate the characters  \n📱 React Native support for iOS and Android  \n\n## Installation\n\n```\nyarn add react-random-reveal\n```\n\n## Demos\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eText Demo\u003c/th\u003e\n      \u003cth\u003eEmoji Demo\u003c/th\u003e\n      \u003cth\u003eWords Demo\u003c/th\u003e\n      \u003cth\u003eReact Native\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n       \u003ca href=\"https://codesandbox.io/s/ecstatic-swirles-cslqw?fontsize=14\u0026hidenavigation=1\u0026theme=dark\"\u003e\n        \u003cimg alt=\"Edit cslqw\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n      \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n       \u003ca href=\"https://codesandbox.io/s/dry-pine-kp7ly?fontsize=14\u0026hidenavigation=1\u0026theme=dark\"\u003e\n        \u003cimg alt=\"Edit kp7ly\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n      \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://codesandbox.io/s/quirky-field-8rr2w?fontsize=14\u0026hidenavigation=1\u0026theme=dark\"\u003e\n          \u003cimg alt=\"Edit 8rr2w\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n       \u003ctd\u003e\n        \u003ca href=\"https://snack.expo.dev/@dimitrov/react-random-reveal\"\u003e\n          Expo Snack\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Basic usage\n\nAs a component:\n\n```jsx\nimport { RandomReveal } from 'react-random-reveal'\n\nconst AddSuspenseComponent = () =\u003e (\n  \u003cRandomReveal isPlaying duration={2} characters=\"hello world\" /\u003e\n)\n```\n\nAs a hook:\n\n```jsx\nimport { useRandomReveal } from 'react-random-reveal'\n\nconst AddSuspenseComponent = () =\u003e {\n  const characters = useRandomReveal({\n    isPlaying: true,\n    duration: 2,\n    characters: 'hello world',\n  })\n\n  return characters\n}\n```\n\n## Props\n\n| Prop Name          | Type                                                   | Default                                    | Description                                                                                                                                                                                                                                                                                      |\n| ------------------ | ------------------------------------------------------ | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| isPlaying          | boolean                                                | _required_                                 | Play and pause animation.                                                                                                                                                                                                                                                                        |\n| characters         | string \\| ReactNode[]                                  | _required_                                 | Characters to reveal in the end of the duration. These could be letters, numbers, emojis, words or components                                                                                                                                                                                    |\n| duration           | number                                                 | _required_                                 | Total animation duration in seconds. The duration includes the overall time random characters are shown plus the time for revealing the characters                                                                                                                                               |\n| updateInterval     | number                                                 | 0.065                                      | Update interval in seconds. Determines how often the characters will change. When set to 0 the value will update on each key frame                                                                                                                                                               |\n| revealDuration     | number                                                 | 0.6                                        | The duration to reveal all characters is represented as a fraction of the total duration. This is a number between 0 and 1. When set to 0, all characters will be revealed in the end of the duration at once. When set to 1, characters will start revealing from the beginning of the duration |\n| revealEasing       | 'linear' \\| 'easeInQuad' \\| 'easeOutQuad' \\| 'random'  | linear                                     | The easing function used to reveal characters during the reveal duration                                                                                                                                                                                                                         |\n| characterSet       | ReactNode[]                                            | English alphabet: ['a', 'b', 'c', ... 'z'] | Characters that will be used during the random characters run                                                                                                                                                                                                                                    |\n| ignoreCharacterSet | string[]                                               | -                                          | Characters that won't be animated and will always be revealed. Can be used to ignore animating _space_ or any special characters.                                                                                                                                                                |\n| onComplete         | () =\u003e void \\| { shouldRepeat: boolean, delay: number } | -                                          | The callback is fired when the duration is reached. It can be used to restart the animation by returning an object with the following params: `shouldRepeat` - indicates if the loop should start over; `delay` - delay before looping again in seconds                                          |\n\n## Browser support\n\nWe support [all modern browsers](https://caniuse.com/?search=es6) targeting `es6`. Internet Explorer (IE) is not longer supported.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvydimitrov%2Freact-random-reveal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvydimitrov%2Freact-random-reveal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvydimitrov%2Freact-random-reveal/lists"}