1.0.12 • Published 4 years ago
react-ugh v1.0.12
react-ugh
react's useState but for the Noobs comming from vue
install:
npm i react-ugh
example without react-ugh:
import React, { useState, useEffect } from "react";
function ComponentName() {
const [counter, setCounter] = useState(0);
useEffect(() => {
// increments counter every 2 seconds
const interval = setInterval(() => {
setCounter((oldValue) => (oldValue += 1));
}, 2000);
return () => clearInterval(interval);
}, []);
return <h1>{counter}</h1>;
}
example with react-ugh:
import React, { useEffect } from "react";
import { useUgh } from "react-ugh";
function ComponentName() {
const state = useUgh({ counter: 0 });
useEffect(() => {
// increments counter every 2 seconds
const interval = setInterval(() => {
state.counter += 1;
}, 2000);
return () => clearInterval(interval);
}, [state]);
return <h1>{state.counter}</h1>;
}
Labels
Share state between components witout any parent wrappers or passing props
function App() {
// state will be shared between Comp1 and Comp2
return (
<div className="App">
<Comp1 />
<Comp2 />
</div>
);
}
function Comp1() {
const state = useUgh({ counter: 0 }, "global-counter-label");
// useUgh(initial_state, validate, label)
useEffect(() => {
const interval = setInterval(() => {
state.counter += 1;
}, 500);
return () => clearInterval(interval);
}, [state]);
return <h1>{state.counter}</h1>;
}
function Comp2() {
const state = useUgh("global-counter-label");
// just give the same label as in Comp1 to share state and thats it
return <h1>{state.counter}</h1>;
}
validate before updating state
pass in custom validation functions for each individual property
import React, { useEffect } from "react";
import useUgh from "react-ugh";
function ComponentName() {
function validateCount(oldCount, newCount) {
if (newCount <= 10) return newCount;
// sets state to 0 when 10 reached
else return 0;
}
function counter_but_in_string_validator(oldval, newval) {
if (newval <= 10) return String(newval);
// converts new value to string before updating state
else return "0";
}
const validator = {
counter: validateCount,
counter_but_in_string:counter_but_in_string_validator,
}
// validator object can be defined only while defining the state
const state = useUgh({ counter: 0, counter_but_in_string: "0" }, validator);
useEffect(() => {
const interval = setInterval(() => {
state.counter += 1;
}, 500);
return () => clearInterval(interval);
}, [state]);
return <h1>{state.counter}</h1>;
}
Api References
useUgh
- type: function
const state = useUgh(state_initial_value, validate, label);
// state_initial_value has to be an object
// other args are explained below
validate
validate holds all your validation functions for the properties in your state_initial_value
- type: object
example:
const state_initial_value = { counter: 0 };
function counterValidator(oldval,newval){
console.log('state changed to:',newval,' from ',oldval)
return newval
}
/* set counterValidator to 'counter' to apply counterValidator to every change that occurs to 'counter' property in ur state */
const validate = { counter: counterValidator };
const state = useUgh(state_initial_value, validate);
label
label holds an identifier using which you can get any state across components with no wrappers or passing any props from one component to the other
- type: string
why use this?
- validation before state update
- share state between components without caring about any wrappers or setup
- way too used to vue
links: