React Gluons

React Gluons is a collection of utility components for building larger React components in a more declarative way, taking inspiration from SolidJS. These components aim to simplify common tasks and enhance the declarative nature of your React applications.

Installation

npm install react-gluons

Usage

• The Show component conditionally renders its children based on a boolean condition.

import React from 'react';
import {Show} from 'react-gluons';

function App() {
    const shouldShow = true;

    return (
        <Show when={shouldShow}>
            <p>This content is conditionally rendered</p>
        </Show>
    );
}

export default App;

• The Hide component conditionally hides its children based on a boolean condition.

import React from 'react';
import {Hide} from 'react-gluons';

function App() {
    const hide = true;

    return (
        <Hide when={hide}>
            <p>This content is conditionally hidden</p>
        </Hide>
    );
}

export default App;

• The Wrap component conditionally wraps its children with a specified wrapper component based on a condition.

import React from 'react';
import {Wrap} from 'react-gluons';

function Wrapper({ children }: { children: React.ReactNode }) {
    return <div className="wrapper">{children}</div>;
}

function App() {
    const shouldWrap = true;

    return (
        <Wrap when={shouldWrap} with={(children) => <Wrapper>{children}</Wrapper>}>
            <p>This is the content</p>
        </Wrap>
    );
}

export default App;

The Swap component is used to swap between different views or components based on a condition or state.

import React, { useState } from 'react';
import {Swap} from 'react-gluons';

function FirstComponent() {
  return <div>First Component</div>;
}

function SecondComponent() {
  return <div>Second Component</div>;
}

function ThirdComponent() {
    return <div>Third Component</div>;
}

function App() {
  const [order, setOrder] = useState('first');

  return (
    <div>
        <Swap on={letter} >
            <Case is={'first'}>
                <FirstComponent/>
            </Case>
            <Case is={'second'}>
                <SecondComponent/>
            </Case>
            <Case is={'third'}>
                <ThirdComponent/>
            </Case>
        </Swap>
    </div>
  );
}

export default App;

The View component is used to render data in a formatted JSON view. It can handle various data types, including objects, arrays, strings, numbers, and booleans.

import React from 'react';
import View from 'react-gluons';

const data = {
  name: "John Doe",
  age: 30,
  hobbies: ["reading", "gaming", "coding"]
};

function App() {
  return <View data={data} />;
}

export default App;

The List component is used to render a list of items, with a custom render function for each item.

import React from 'react';
import List from 'react-gluons';

const items = ["Item 1", "Item 2", "Item 3"];

function App() {
    return (
        <List from={items} fallback={<div>empty!</div>}>
            {({label, ...rest}, index) => <Button label={label}/>}
        </List>
    );
}

export default App;

The Async component can handle asynchronous operations, such as data fetching, and display appropriate UI states for loading and errors.

import React, { lazy } from 'react';
import Async from './Async';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
    return (
        <Async
            fallback={<div>Loading...</div>}
            errorFallback={<div>Something went wrong! <button onClick={() => window.location.reload()}>Retry</button></div>}
            retry={true}
        >
            <LazyComponent />
        </Async>
    );
}

export default App;