AX-React-Lib
Some useful staffs for react development.
Components
Store
The component for manage app state.
props
reducers: An object that take reducer for different key.
defaultValues: An object that assign defaultValue to different key.
children: ReactNode.
Example
function App(){
return (
<Store
reducers={{
'counter': (state, action)=>{
switch(action.type){
case 'increment':
return state+1;
case 'reset':
return 0;
case 'set':
return action.counter;
default:
return state;
}
}
}}
defaultValues={{
'counter':0,
'counter2':0
}}
>
<Children/>
</Store>
)
function Children(){
const [counter,setCounter]=useStore('counter');
const [counter2,setCounter2]=useStore('counter2');
const [counter3,setCounter3]=useStore('counter3',0);
return (
<div>
<button onClick={()=>setCounter({type:'increment'})}>counter</button>
<button onClick={()=>setCounter(counter2+1)}>counter2</button>
<button onClick={()=>setCounter(counter+counter2)}>counter3</button>
</div>
)
}
}If
A component that render it's children when condition is meet.
props
condition: A boolean value or a function that returns a boolean value.
children: ReactNode. Children will be render when the condition is true.
Example
function App(){
return (
<Store>
<Children/>
</Store>
)
function Children(){
const [isLogin,setLogin]=useStore('login');
return (
<div>
<If condition={isLogin}>
<Contents></Contents>
</If>
<If condition={!isLogin}>
<Login/>
</If>
</div>
)
}
}Loader
A component will run a function.
props
load: a function for loading things.
callback: Optional, a function for handle result of load.
Example
function App(){
return (
<Store>
<Children/>
</Store>
)
function Children(){
const [isLogin,setLogin]=useStore('login');
return (
<div>
<Loader
load={async ()=>{
const res = await login();
return res;
}}
callback={(res)=>{
setLogin(res)
}}
/>
<If condition={isLogin}>
<Contents></Contents>
</If>
<If condition={!isLogin}>
<Login/>
</If>
</div>
)
}
}LazyLoad
A component will render its children when it's visible.
props
tag: HTML tag name or React component name, Default: div
children: ReactNode
style: CSS properties
className:CSS class name
root:The element that is used as the viewport for checking visibility of the target.
threshold: Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. Default: 0
rootMargin: Margin around the root.
forward: boolean. If set to true, the observer will be removed once the element is visible. Default: true
Example
function App(){
return (
<div>
...React Nodes
<LazyLoad tag='div'>
...React Nodes
</LazyLoad>
</div>
)
}Hooks
useStore(key:string, defaultValue?:any)
Access Store data.
Parameters
key: a string key for access data.
defaultValue: The default value when no data in the store for the key.
Returns
[data:any, update:(value|Action)=>void]
data:The value of the key in the store.
update: A function to update the value of the key. It take an action when there is a reducer assigned to the key or take any value when not reducer is assigned.
Example
function App(){
return (
<Store
reducers={{
'counter': (state, action)=>{
switch(action.type){
case 'increment':
return state+1;
case 'reset':
return 0;
case 'set':
return action.counter;
default:
return state;
}
}
}}
defaultValues={{
'counter':0,
'counter2':0
}}
>
<Children/>
</Store>
)
function Children(){
const [counter,setCounter]=useStore('counter');
const [counter2,setCounter2]=useStore('counter2');
const [counter3,setCounter3]=useStore('counter3',0);
return (
<div>
<button onClick={()=>setCounter({type:'increment'})}>counter</button>
<button onClick={()=>setCounter(counter2+1)}>counter2</button>
<button onClick={()=>setCounter(counter+counter2)}>counter3</button>
</div>
)
}
}useAsync(fn:Function)
Use useAsync when an async operation is needed.
Parameters
fn: an async function.
DependencyList : React DependencyList.
Returns
[isDone:boolean, reset:()=>void]
isDone: The status of current async operation, return true when operation is finished.
reset: A function can restart the async operation.
Example
function SomeComponent(){
const [data,setData] = useState();
const [isDone,reset] = useAsync(async ()=>{
const res = await fetch('data');
const data = await res.json();
setData(data)
});
return (
<button onClick={reset}>{'Refresh'}</button>
)
}useDelay(fn:()=>void, ms:number, dep:React.DependencyList)
useEffect with delay.
Parameters
fn: an function.
dep : React DependencyList.
useIntersectionObserver
Parameters
ref: A ref to Element .
options: IntersectionObserverInit.
forward:If set to true, the observer will be removed once the element is visible. Default: true
Returns
isIntersecting: A boolean value. Return true if the element is intersecting.