syntax-sugar

Syntax Sugar for React.

Installation

npm install syntax-sugar

Components

Each

Component that renders an array of elements using a rendering function for each element.

Props

• renderAs: Rendering function for each element.
• of: Array of elements to render.
• setAsKey (optional): Function that returns a unique key for each element.

Usage

import { Each } from 'syntax-sugar';

const MyComponent = () => {
  const fruits = [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }];

  return (
    <ul>
      <Each
        of={fruits}
        setAsKey={(fruit) => fruit.id}
        renderAs={(fruit) => <li>{fruit.name}</li>}
      />
    </ul>
  );
};

If

Component for conditional rendering.

Props

• condition: The condition to evaluate.

Usage

import { If, Then, Else } from 'syntax-sugar';

const MyComponent = ({ isLoggedIn }) => {
  return (
    <If condition={isLoggedIn}>
      <Then>
        <h1>Welcome back!</h1>
      </Then>
      <Else>
        <h1>Please login.</h1>
      </Else>
    </If>
  );
};

RenderIf

Renders the content only if the condition is true.

Props

• condition: The condition to evaluate.

Usage

import { RenderIf } from 'syntax-sugar';

const MyComponent = ({ showContent }) => {
  return (
    <RenderIf condition={showContent}>
      <h1>Here is the content!</h1>
    </RenderIf>
  );
};

Hooks

useFetch

A hook for making HTTP requests.

Usage

import { useFetch } from 'syntax-sugar';
import { useEffect } from 'react';

const MyComponent = () => {
  const { makeRequest, isRequestPending, error } = useFetch();

  useEffect(() => {
    const controller = new AbortController();

    const fetchData = () => {
      const request = {
        call: axios.get('https://api.example.com/data'),
        controller,
      };

      const data = makeRequest(request);
      console.log(data);
    };

    fetchData();

    return () => {
      controller.abort();
    };
  }, []);

  if (isRequestPending) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return (
    <div>
      {/* Render your data here */}
    </div>
  );
};