Introduction

keep-render is a React package that simplifies conditional rendering. It provides components for handling loading states, and for rendering content based on conditions.

The purpose of this package is to make conditional rendering more readable and maintainable. Not only does it make the code more readable, but it also makes it easier to understand the logic behind the rendering. It also helps to reduce the amount of boilerplate code needed for conditional rendering.

Installation

npm install keep-render

Usage

import { Render } from "keep-render";
import { useEffect, useState } from "react";

const MyComp = () => {
  let condition1 = true;
  let condition2 = false;

  const [loading, setLoading] = useState(true);
  useEffect(() => {
    setTimeout(() => setLoading(false), 1000);
  }, []);

  return (
    <>
      {/* // !-- Example 1 */}
      <Render isLoading={loading}>
        <Render.When isTrue={condition1}>
          <div>Data is available</div>
        </Render.When>
        <Render.Else>
          <div>No data available</div>
        </Render.Else>
        <Render.Loading>
          <div>Loading...</div>
        </Render.Loading>
      </Render>

      {/* // !-- Example 2 //! render.when can call form outside or anywhere in the component */}
      <Render.When isTrue={condition1}>
        <div>Data is available</div>
      </Render.When>

      {/* // !-- Example 3  */}
      <Render>
        <Render.When isTrue={condition1}>
          <div className="">this is condition 1 </div>
          <Render.When isTrue={condition2}>
            <div className="">this is condition 2 </div>
          </Render.When>
          <Render.Else>not full-fill condition 2 </Render.Else>
        </Render.When>
        <Render.Else>
          <div className="">Not full-fill any condition </div>
        </Render.Else>
      </Render>
    </>
  );
};

export default MyComp;

Comparison :

//  the General way
{
  isLoading ? (
    <Loading />
  ) : (
    <Col span={24}>
      {(!isLoading && isError && paginationCondition == "search") ||
      data?.data?.results?.length === 0 ? (
        <div className="h-[500px] flex justify-center items-center text-3xl">
          Sorry! No Flights Found.
        </div>
      ) : (
        <>
          {data?.data?.results?.map((item, index) => (
            <FlightCard Item={item} key={index} />
          ))}
          {(data?.count || 0) > 5 && (
            <Pagination
              size="small"
              {...pagination}
              total={data?.count || 0}
              defaultPageSize={1}
              showSizeChanger
              pageSizeOptions={[20, 50, 100]}
              onChange={handlePaginationChange}
              className="flex justify-end"
            />
          )}
        </>
      )}
    </Col>
  );
}

//  using keep-render
<Render isLoading={isLoading}>
  <Render.When isTrue={isError || data?.data?.results?.length === 0}>
    <div className="h-[200px] flex justify-center items-center text-3xl">
      Sorry! No Flights Found.
    </div>
  </Render.When>
  <Render.Else>
    {data?.data?.results?.map((item, index) => (
      <FlightCard Item={item} key={index} />
    ))}
    <Render.When isTrue={(data?.count || 0) > 5}>
      <Pagination
        size="small"
        {...pagination}
        total={data?.count || 0}
        defaultPageSize={1}
        showSizeChanger
        pageSizeOptions={[20, 50, 100]}
        onChange={handlePaginationChange}
        className="flex justify-end"
      />
    </Render.When>
  </Render.Else>
  <Render.Loading>
    <Loading />
  </Render.Loading>
</Render>;

Return Values

The Render component renders the first child that matches the condition. If none of the conditions are met, the Render.Else component is rendered. If the isLoading prop is true, the Render.Loading component is rendered.

Components

Render

The main component that wraps all other components. It accepts an optional isLoading prop.

Render.When

This component is used to render content when a certain condition is true. It requires an isTrue prop, which should be a boolean.

Render.Else

This component is used to render content when the Render.When condition is false. It does not accept any props.

Render.Loading

This component is used to render content when the isLoading prop of the Render component is true. It does not accept any props.

Context

The Render component uses a React context to ensure that the Render.When, Render.Else, and Render.Loading components are used within a Render component. If they are used outside of a Render component, an error will be thrown.

License

MIT