React Elegant Syntax

React Elegant Syntax is a developer-friendly package that enhances the syntax of React.js.

It provides syntactic sugar around some native JS logic (f.e loops, conditions) to make your React code more readable and elegant, improving the overall developer experience.

Installation

To install the package, use the following command:

npm install react-elegant-syntax

Usage Import the library into your React project:

Typescript

import {} from "react-elegant-syntax";

Javascript:

import {} from "react-elegant-syntax";

Features

Conditions

IF, Else, ElIf, Then

The react-elegant-syntax library provides IF, Else, Elif and Then components to make conditional rendering in React more readable and elegant.

IF is spelled as IF with all caps to indicate it as a main parent component.

How does it work internally?

IF controls what and how child elements should be rendered. It receives the first or main condition similar to if (condition) should.

If the first or main condition passes, it collects all the jsx children not belonging to other logical components and renders them. You can also group them under a singular Then component to keep it clean, but it is optional.

If IF condition fails, it will iterate through Elif components and returns/render the first matching Element Tree.

If IF or Elif components are all receiving falsy conditions, Else component will be rendered. If no Else exists, null is rendered.

IF

The usual way of using condition rendering is often not a problematic one, but does look uneasy to the eyes.

<p>
    {
      (cartItems > 0 && discount > 0) &&
      <div>
        You are eligible for {discount}% on your items.
      </div>
    }
<p>

Instead you can write:

Javascript

import { IF } from "react-elegant-syntax";

function MyComponent() {
  return (
    <IF condition={cartItems > 0 && discount > 0}>
      <Then>
        <div>You are eligible for {discount}% on your items.</div>
      </Then>
      {/* OR */}
      <div>You are eligible for {discount}% on your items.</div>
    </IF>
  );
}

Typescript

import { IF } from "react-elegant-syntax";

function MyComponent() {
  return (
    <IF condition={cartItems > 0 && discount > 0}>
      <div>You are eligible for {discount}% on your items.</div>
    </IF>
  );
}

Else

To use Else as the fallback section for rendering, simply use <Else> block in the IF block.

import { IF, Else } from "react-elegant-syntax";

function MyComponent() {
  return (
    <IF condition={cartItems > 0 && discount > 0}>
      <div>You are eligible for {discount}% on your items.</div>
      <Else>No Discount!</Else>
    </IF>
  );
}

Elif

Elif works similar to Else + If combined and are executed in the order of availability.

import { IF, Else, Elif } from "react-elegant-syntax";

function MyComponent() {
    return (
        <IF condition={cartItems > 0}>
            <IF condition={discount > 0 && discount < 5}>
                <div>You are eligible for {discount}% on your items.</div>
                <ElIf condition={discount >= 5}>
                    <div>You are eligible for a huge {discount}% on your items.</div>
                </Elif>
                <Else>
                    No discount!
                </Else>
            </IF>
            <Else>
                Add Items to cart
            </Else>
        </IF>
    );
}

Iterators

Map

Map allows writing looped element rendering without using JS syntax. You can simply use Map component to map over the list and provide the Template component instance which will be used to create the component instance for each iteration

import { useEffect } from "react";
import { Map } from "react-elegant-syntax";

function TestComponent({ item, key, ...otherProps }) {
  useEffect(() => {
    // Do something on mount.
  }, []);

  return (
    <div key={key} {...otherProps}>
      Item is {item}!
    </div>
  );
}

function MyComponent() {
  const list = ["A", "B", "C", "D"];

  return (
    <>
      {/* 
        Iterating using a fragment with static component as template 
        return <p>A</p><p>A</p><p>A</p><p>A</p>
        */}
      <div role="test-container">
        <Map over={list}>
          <>
            <p>A</p>
          </>
        </Map>
      </div>
      {/*
        Iterating using a function that can receive item and key to return an element instance 
        return <p>A</p><p>B</p><p>C</p><p>D</p>
        */}
      */}
      <div role="test-container">
        <Map over={list}>{(item, key: number) => <p key={key}>{item}</p>}</Map>
      </div>
      {/*
        Iterating using a string as template, it does not change the output using the list, simply returns
        the string n times. 
        return Primitive StringPrimitive StringPrimitive StringPrimitive String
        */}
      <div>
        <Map over={list}>Primitive String</Map>
      </div>
      {/*
        Uses `TestComponent` as the Template and returns 4 instances of this component, 
        each with it's own copy of item and props. 
        */}
      <div>
        <Map over={list}>
          <TestComponent item={null} className="foo-bar" />
        </Map>
      </div>
    </>
  );
}

Future Features

This library is still under active development. More features to come. Request any new feature or report any bugs to us directly at our email.

License

This project is licensed under the terms of the MIT license. See LICENSE for more details.