
Product
Rust Support Now in Beta
Socket's Rust support is moving to Beta: all users can scan Cargo projects and generate SBOMs, including Cargo.toml-only crates, with Rust-aware supply chain checks.
react-random-reveal
Advanced tools
React component/hook to add a little thrill before revealing the truth via random character animation
React/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.
📜 Animate random letters, numbers, emojis, words or components
🏆 Performance optimized with single requestAnimationFrame
loop to animate the characters
📱 React Native support for iOS and Android
yarn add react-random-reveal
Text Demo | Emoji Demo | Words Demo | React Native |
---|---|---|---|
|
|
| Expo Snack |
As a component:
import { RandomReveal } from 'react-random-reveal'
const AddSuspenseComponent = () => (
<RandomReveal isPlaying duration={2} characters="hello world" />
)
As a hook:
import { useRandomReveal } from 'react-random-reveal'
const AddSuspenseComponent = () => {
const characters = useRandomReveal({
isPlaying: true,
duration: 2,
characters: 'hello world',
})
return characters
}
Prop Name | Type | Default | Description |
---|---|---|---|
isPlaying | boolean | required | Play and pause animation. |
characters | string | ReactNode[] | required | Characters to reveal in the end of the duration. These could be letters, numbers, emojis, words or components |
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 |
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 |
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 |
revealEasing | 'linear' | 'easeInQuad' | 'easeOutQuad' | 'random' | linear | The easing function used to reveal characters during the reveal duration |
characterSet | ReactNode[] | English alphabet: ['a', 'b', 'c', ... 'z'] | Characters that will be used during the random characters run |
ignoreCharacterSet | string[] | - | Characters that won't be animated and will always be revealed. Can be used to ignore animating space or any special characters. |
onComplete | () => 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 |
We support all modern browsers targeting es6
. Internet Explorer (IE) is not longer supported.
2.0.1 ( July 17th, 2024)
Bug: When character is set to a single character a random character will display after animation because revealTime divides by 0 and is NaN - thanks @zhaogeorge3
FAQs
React component/hook to add a little thrill before revealing the truth via random character animation
The npm package react-random-reveal receives a total of 257 weekly downloads. As such, react-random-reveal popularity was classified as not popular.
We found that react-random-reveal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket's Rust support is moving to Beta: all users can scan Cargo projects and generate SBOMs, including Cargo.toml-only crates, with Rust-aware supply chain checks.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.