https://github.com/eins78/react-let

https://github.com/eins78/react-let

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/eins78/react-let
• Owner: eins78
• Created: 2023-04-07T20:43:15.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-04-09T22:26:18.000Z (over 1 year ago)
• Last Synced: 2024-04-15T03:00:43.834Z (9 months ago)
• Language: TypeScript
• Size: 118 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `react-let`





 

Like `(let)` in Lisp, [Clojure](https://clojuredocs.org/clojure.core/let), etc., but for React/JSX.

Makes it easier to declare variables deep inside a JSX tree,

which are then passed to a `children` render function.

When used with TypeScript, the render function arguments are infered from the props given to ``.

## Installation

```shell

npm add react-let

# alternative:

yarn add react-let

```

## Usage Examples

```tsx

import React from "react";

import { Let } from "../main";

export const ExampleMemo = () => (

  


    

      {({ result, another }) => ( // TypeScript infered: (parameter) result: string; (parameter) another: number

        


          {result}. {another}.

        

      )}

    

  

);


export const ExampleInput = () => (

  


    

      {({ id }) => ( // TypeScript infered: (parameter) id: string

        <>

          {id}

          

        >

      )}

    

  

);


export const ExampleAsync = () => {

  type FetchData = { str: string; num: number };

  type FetchResult = { state: "loading" | "finished" | "error"; data?: FetchData };

  const [fetchResult, setFetchResult] = useState({ state: "loading" });

  return (

    


      {fetchResult.state === "loading" ? (

        "loading…"

      ) : fetchResult.state === "error" ? (

        "error!"

      ) : (

        

          {({ data }) => ( // TypeScript infered: (parameter) data: FetchData

            <>

              
{JSON.stringify(data)}

            >

          )}

        

      )}

    

  );

};

```


All examples can be found in `src/example/App.tsx`,

and be can be run using:

```shell

npm ci

npm run dev

```

## Alternatives

Instead of using this component, you can use an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) inside which you can declare JavaScript variables normally (i.e. you can use statements and not just expressions).

```tsx

export const ExampleVanilla = () => (

  


    {(() => {

      const result = "expensive-calculation-result";

      const another = 42;


      return (

        


          {result}. {another}.

        

      );

    })()}

  

);

```


## Development

The command to run the examples could is used for development (but no work is currently planned as the component is feature-complete).

To publish a new version:

```shell

npm version 

npm publish && \

git push --tags origin HEAD:main

```

## Copyright / License

© Max F. Albrecht 

License: MIT