React-AllReq

Declarative conditional components and hooks for React.

[changelog]

---

npminstall @allreq/react

yarnadd @allreq/react

---

Example

AllReq can check all children and all props automatically.

import{AllReq}from'@allreq/react';/* Required variables */// title,// language,// rating,// subtitle,// description,// image.<AllReqRejector={()=><h1>{'Loading...'}</h1>}><Column>{description}<Title>{title}</Title><Subtitlelang={language}rating={rating}>{subtitle}</Subtitle><Description>{description}</Description></Column><Posterbg={image}></Poster></AllReq>;

And can be efficient.

import{AllReq}from'@allreq/react';/* with GraphQL or Any Query */const{
loading,// only check this variable.data: {
movie
}={},}=useQuery(GET_MOVIE, ...);letisNotLoading=!loading||undefined;// only check within Array of `With`.<AllReqnodepthWith={[isNotLoading]}Rejector={()=><h1>{'Loading...'}</h1>}><Column>{movie.description}<Title>{movie.title}</Title><Subtitlelang={movie.language}rating={movie.rating}>{movie.subtitle}</Subtitle><Description>{movie.description}</Description></Column><Posterbg={movie.image}></Poster></AllReq>;

with original allreq literal function.

import{allreq}from'allreq';// npm i allreqimport{AllReq}from'@allreq/react';/* Required variables */// title,// language,// rating,// subtitle,// description,// image.<AllReqRejector={()=><h1>{'Loading...'}</h1>}><Column>{description}<Title>{allreq`The title is ${title}`}</Title><Subtitle>{allreq`${subtitle} lang: ${language} stars: ${rating}`}</Subtitle><Description>{description}</Description></Column><Posterbg={image}></Poster></AllReq>;

---

Arguments and Types

[OPTIONS]

typeAllReqProps<IN,OUT>={// = default valueWith?: any[];// = []Resolver?: Resolver<IN>;// = (arg) => arg !== undefinedRejector?: Rejector<IN,OUT>;// = () => ''Depth?: number;nodepth?: boolean;children?: ReactNode;};

License

MIT