Skip to content

Commit

Permalink
feat: v2 rewrite (#16)
Browse files Browse the repository at this point in the history 
* chore: update depts

* feat: use esbuild instead of webpack

* chore: optmise the code

* feat: run GH on push and PR to master

* feat: render react component as characters to animate

* chore: polish code

* chore: update readme

* fix: readme props table

* fix: props table in readme

* chore: update readme

* fix: browser support

* feat: make the duration required prop

* fix: readme prop in table

* feat: add changelog

* chore: update bundle size label

* chore: update readme

* chore: update Changelog
  • Loading branch information
@vydimitrov
vydimitrov authored Dec 8, 2021
1 parent 85ca082 commit 44b152e
Show file tree
Hide file tree
Showing 37 changed files with 2,425 additions and 4,592 deletions.
14 changes: 10 additions & 4 deletions .github/workflows/codecov.yml → .github/workflows/code-coerage.yml
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
name: Codecov Coverage
on: [push]
name: Code Coverage
on:
push:
branches:
- master
pull_request:
branches:
- master
jobs:
build-push-coverage:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node
uses: actions/setup-node@v1
uses: actions/setup-node@v2
with:
node-version: '13.x'
node-version: '16'
- name: Generate coverage report
run: |
yarn install
Expand Down
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ lib
node_modules
.idea
coverage
yarn-error.log
2 changes: 0 additions & 2 deletions .prettierrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,4 @@ module.exports = {
semi: false,
singleQuote: true,
trailingComma: 'es5',
useTabs: true,
tabWidth: 2,
}
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Change Log

## 2.0.0 ( December 8th, 2021)

**New features:**
We can now animate React components as well.
New `updateInterval` prop is added to control the speed of the animation

**Breaking Changes:**
IE is no longer supported.
`speed` prop is replaced by `updateInterval` prop.
To repeat the animation now we need to return an object with `shouldRepeat` prop from the `onComplete` handler.
21 changes: 21 additions & 0 deletions LICENSE
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2021 Vasil Dimitrov

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
52 changes: 22 additions & 30 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,13 @@
[![npm](https://img.shields.io/npm/v/react-random-reveal)](https://www.npmjs.com/package/react-random-reveal)
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vydimitrov/react-random-reveal/Codecov%20Coverage)](https://codecov.io/gh/vydimitrov/react-random-reveal)
[![Codecov](https://img.shields.io/codecov/c/gh/vydimitrov/react-random-reveal)](https://codecov.io/gh/vydimitrov/react-random-reveal)
[![npm bundle size](https://img.shields.io/bundlephobia/min/react-random-reveal)](https://bundlephobia.com/result?p=react-random-reveal)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-random-reveal)](https://bundlephobia.com/result?p=react-random-reveal)

React component/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.


<img src="https://user-images.githubusercontent.com/10707142/77891767-c3332000-7271-11ea-9ba8-b2de048cad32.gif">

- Animate random letters, numbers, words or even emojis
- Animate random letters, numbers, emojis, words or components
- Performance optimized with single `requestAnimationFrame` loop to animate the random characters (no `setInterval` used)
- Built with TypeScript

Expand All @@ -20,12 +19,6 @@ React component/hook to add a little thrill before revealing the truth. This eff
yarn add react-random-reveal
```

or

```
npm install react-random-reveal
```

## Demos

<table>
Expand Down Expand Up @@ -65,12 +58,7 @@ As a component:
import { RandomReveal } from 'react-random-reveal'

const AddSuspenseComponent = () => (
<RandomReveal
isPlaying
duration={4.6}
revealDuration={0.5}
characters="hello world"
/>
<RandomReveal isPlaying duration={2} characters="hello world" />
)
```

Expand All @@ -82,24 +70,28 @@ import { useRandomReveal } from 'react-random-reveal'
const AddSuspenseComponent = () => {
const characters = useRandomReveal({
isPlaying: true,
duration: 4.6,
revealDuration: 0.5,
characters: 'hello world'
duration: 2,
characters: 'hello world',
})

return characters
}
```

## Props
| Prop Name | Type | Default | Description |
|--------------------|-----------------------------------------------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| isPlaying | boolean | _required_ | Play and pause animation. |
| duration | number | _required_ | Total duration in seconds. The duration includes the overall time random characters are shown plus the time for revealing the characters. |
| characters | string \| Array\<string> | _required_ | Characters to reveal in the end of the duration. These could be letters, numbers, words or emojis. |
| speed | number | 8 | Characters change speed from 0 to 10. At 10, new the characters will be shown on each frame, approximately every 16.6ms. |
| 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 | Array\<string> | English alphabet: ['a', 'b', 'c', ... 'z'] | Characters that will be used during the random characters run. |
| ignoreCharacterSet | Array\<string> | - | Characters that won't be animated and will always be revealed. Can be used to ignore animating _space_ or any special characters. |
| onComplete | function(): undefined \| [shouldRepeat: boolean, delay: number] | - | On complete handler. It can be used to repeat the animation by returning an array where the first element `shouldRepeat` indicates if the loop should start over and second element `delay` specifies the delay before looping again in milliseconds. |

| 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 |

## Browser support

We support [all modern browsers](https://caniuse.com/?search=es6) targeting `es6`. Internet Explorer (IE) is not longer supported.
20 changes: 9 additions & 11 deletions __mocks__/use-elapsed-time.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { Config } from 'use-elapsed-time'
import type { Props } from 'use-elapsed-time'

let isPlaying = false
let elapsedTime = 0
let config: Config = {}
let config: Props = { isPlaying: false }

module.exports = {
useElapsedTime(isPlayingBool: boolean, configObj: Config): number {
useElapsedTime(configObj: Props) {
config = configObj
isPlaying = isPlayingBool

return elapsedTime
return { elapsedTime }
},

__setElapsedTime(time: number): void {
Expand All @@ -22,22 +20,22 @@ module.exports = {

__fireOnComplete(): void {
// the compiler does not like optional chaining here
config.onComplete && config.onComplete()
config.onComplete && config.onComplete(100)
},

__getConfig(): Config {
__getConfig(): Props {
return config
},

__resetConfig(): void {
config = {}
config = { isPlaying: false }
},

__getIsPlaying(): boolean {
return isPlaying
return config.isPlaying
},

__resetIsPlaying(): void {
isPlaying = false
config.isPlaying = false
},
}
Loading

0 comments on commit 44b152e

Please sign in to comment.