https://github.com/chocoscoding/resizejs
https://github.com/chocoscoding/resizejs
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/chocoscoding/resizejs
- Owner: chocoscoding
- License: mit
- Created: 2022-02-23T22:30:04.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-16T19:22:29.000Z (about 4 years ago)
- Last Synced: 2024-04-09T21:25:07.263Z (almost 2 years ago)
- Language: JavaScript
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Resyze
Resyze is a the best alternative for responsive font-size in REACTJS.
Bye-Bye to (CSS _media queries_)
## Installation
Use the npm package manager to install resyze.
```bash
npm install resyze
```
## Usage Info
r_ele === the element that will be resized
r_type === type of text
r_ext = this is the additional amount of font size you want to add (it measures finally in px)
_r_ext must be a number_
TE (_Take Effect_) === Decide at ehat screen size rezyze starts taking effect
SB (_Specific Box_) === For targeting a particular box or div
# For normal text
"h1";
"h2";
"h3";
"h4";
"h5";
"ignore";
"normal";
"tiny";
"text";
# For targeted divs
"ignore";
"normal";
"tiny";
"big"; (for only SB)
## Usage
```js
import React, { useEffect, useRef } from "react";
import resyze from "resyze";
const appbody = useRef(0);
const appbody2 = useRef(0);
const button1 = useRef(0);
useEffect(() => {
function resyzef() {
resyze([
{
r_ele: appbody.current,
r_type: "h1",
r_ext: 4,
},
{
TE: 300,
SB: button1.current,
r_type: "normal",
},
{
r_ele: appbody2.current,
r_type: "text",
},
]);
}
window.addEventListener("resize", resyzef);
window.addEventListener("load", resyzef);
});
return (
);
```
## License
MIT