https://github.com/roydukkey/jsx-destruct

This tiny package allows you to unpack values directly in JSX statements
https://github.com/roydukkey/jsx-destruct

destructuring jsx

Last synced: about 1 month ago
JSON representation

This tiny package allows you to unpack values directly in JSX statements

• Host: GitHub
• URL: https://github.com/roydukkey/jsx-destruct
• Owner: roydukkey
• Created: 2021-07-06T22:23:10.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-08-09T16:14:47.000Z (over 3 years ago)
• Last Synced: 2024-10-20T07:45:35.503Z (2 months ago)
• Topics: destructuring, jsx
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# jsx-destruct

[![Release Version](https://img.shields.io/npm/v/jsx-destruct.svg)](https://www.npmjs.com/package/jsx-destruct)

[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

This tiny package allows you to unpack values directly in JSX statements. This helps avoid long object references and keeps declarations joined within your components.

## Install

Install the package:

```bash

npm install jsx-destruct

```

## Usage

```js

import { Fragment } from 'react';

import { useQuery } from 'react-query';

import destruct from 'jsx-destruct';

export function SampleComponent () {

  const { isLoading, data } = useQuery('repoData', async () =>

    fetch('https://api.github.com/repos/roydukkey/clean-package')

      .then(async (res) => res.json())

  );

  return (

    

      {isLoading && 
Loading...
}


      {destruct(data, ({ name, description, owner: { login } }) => (

        

          
{name}

          
by {login}

          
{description}

        

      ))}

    

  );


}

```

## Inspiration

1. jsx-control-statements' [`` component](https://github.com/AlexGilleran/jsx-control-statements#with-tag)

1. Handlebars' builtin [`#with` helper](https://handlebarsjs.com/guide/builtin-helpers.html#with)