@allreq/react v0.1.0

React-AllReq

Declarative conditional components and hooks for React.

[changelog]

npm install @allreq/react

yarn add @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.

<AllReq Rejector={() => <h1>{'Loading...'}</h1>}>
  <Column>
    {description}
    <Title>{title}</Title>
    <Subtitle lang={language} rating={rating}>
      {subtitle}
    </Subtitle>
    <Description>{description}</Description>
  </Column>
  <Poster bg={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, ...);

let isNotLoading = !loading || undefined;

// only check within Array of `With`.
<AllReq nodepth With={[isNotLoading]} Rejector={() => <h1>{'Loading...'}</h1>}>
  <Column>
    {movie.description}
    <Title>{movie.title}</Title>
    <Subtitle lang={movie.language} rating={movie.rating}>
      {movie.subtitle}
    </Subtitle>
    <Description>{movie.description}</Description>
  </Column>
  <Poster bg={movie.image}></Poster>
</AllReq>;

with original allreq literal function.

import { allreq } from 'allreq'; // npm i allreq
import { AllReq } from '@allreq/react';

/* Required variables */

// title,
// language,
// rating,
// subtitle,
// description,
// image.

<AllReq Rejector={() => <h1>{'Loading...'}</h1>}>
  <Column>
    {description}
    <Title>{allreq`The title is ${title}`}</Title>
    <Subtitle>{allreq`${subtitle} lang: ${language} stars: ${rating}`}</Subtitle>
    <Description>{description}</Description>
  </Column>
  <Poster bg={image}></Poster>
</AllReq>;

Arguments and Types

[OPTIONS]

type AllReqProps<IN, OUT> = {
  // = default value
  With?: any[]; // = []
  Resolver?: Resolver<IN>; // = (arg) => arg !== undefined
  Rejector?: Rejector<IN, OUT>; // = () => ''
  Depth?: number;
  nodepth?: boolean;
  children?: ReactNode;
};

License

MIT