0.0.20 • Published 9 months ago
mg-js v0.0.20
React hooks
useLazyLoading
Lazy loading images
const [Intersector, data, setData] = useLazyLoading({ initPage: 0, distance: "50px", targetPercent: 0.5 }, (page) => {
// do your api request using page parameter and update the data state
})
return (
<div>
{/* rendering the data */}
{data.map(item => {
return <img src={item.link} />
})}
{/* put the intersector at the end */}
<Intersector />
</div>
)
You can keep the previous data whene you switch the page
add uuidKeeper inside useLazyLoading({uuidKeeper:"unique key"})
useObjectState
Management of object state
const [object, setObject, reset] = useObjectState({name:"johndoe",isProfession:true})
setObject("isProfession",false)
// updating one value
setObject({name:"johnny",isProfession:false})
// updating many values
reset(null)
// put null in all the values
// alternative way for forms 👇
useObjectState(["name","email","password"])
// adds the string values to the object and updates them with empty string
useObjectState(["name","email","password",{isFriendly:true,gender:null}])
// use the alternative way and and set specific values👇
React components
If
<If condition={true}>
<Menu>
</If>
Media query
<MediaQuery minWidth={500} maxWidth={800} >
<Menu>
</MediaQuery>
Utils
timeAgo
Time ago function
timeAgo(Date.now(), "En") //At this moment
timeAgo(Date.now()-(1000*60), "En") //One minute ago
timeAgo(Date.now()-(2000*60), "En") //Before two minutes
0.0.20
9 months ago
0.0.14
9 months ago
0.0.15
9 months ago
0.0.16
9 months ago
0.0.18
9 months ago
0.0.19
9 months ago
0.0.13
1 year ago
0.0.12
1 year ago
0.0.11
1 year ago
0.0.10
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago
0.0.0
1 year ago