https://github.com/jerryoluranti/write-on-js
Write On Effect JavaScript
https://github.com/jerryoluranti/write-on-js
Last synced: 3 months ago
JSON representation
Write On Effect JavaScript
- Host: GitHub
- URL: https://github.com/jerryoluranti/write-on-js
- Owner: jerryOluranti
- License: mit
- Created: 2021-06-03T04:06:17.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-08T11:20:42.000Z (over 3 years ago)
- Last Synced: 2025-01-23T02:09:30.193Z (5 months ago)
- Language: JavaScript
- Size: 29.3 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# write-on-js
[https://write-on-js.netlify.app]
> Write On Effect JavaScript
## Install
There are a couple of ways of installing the package depending on what framework or library you're using.
### NPM
```
npm i write-on-node
```
### CDN
> Coming soon
### Cloning The Repo
```
git clone https://github.com/jerryHolurantie/write-on-js.git
```
There are two js files in this repo. `write-on.js` and `write-on-node.js` for vanilla javascript and react projects respectively.
## Usage
### With Vanilla JS
- Add a script tag to your html file
```
```
- Call the writeOn function
```
writeOn(element, text = null, list = null, loopTimes = null, delayTime = 0.1, waitTime = 1)
```
#### Example
```
let writeOnElement = document.querySelector(".write-on-text")
const text = "This Is Write On Effect With Javascript"
writeOn(writeOnElement, text);
```
### With React
- Import the write-on.js file
```
import writeOn from 'write-on-node'
```
- Call the writeOn function in useEffect
```
useEffect(() => {
writeOn({setstate, text, list, loopTimes, delayTime = 0.5, waitTime = 1})
}, [])
```
## API
### Vanilla JS
```
writeOn(element, text = null, loopTimes = null, delayTime = 0.1, waitTime = 1)
```
#### element
Your HTML DOM Element.
#### text
> Type: String | Array
The text to be displayed.
### React Js
```
useEffect(() => {
writeOn({setstate, text, list, loopTimes, delayTime = 0.5, waitTime = 1})
}, [])
```
#### setstate
Your `setState` function in react. Visit [Learn react state hook](https://reactjs.org/docs/hooks-state.html#gatsby-focus-wrapper)
#### text
> Type: String
The text to be displayed.
#### list
> Type: Array
Array of strings
> You can either pass in a text or an array of texts. Pass in ```null``` if you are not giving any arguement
#### loopTimes
> Type: Integer
Number of times to repeat the write on.
> **`null`(default) = infinite**
#### delayTime
Time delay between each characters in `seconds`.
> **default = `0.1s`**
#### waitTime
Time to wait before erasing a text in `seconds`.
> **default = `1s`**
Hooray!!!
You are ready to rock :)