Skip to content

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

Notifications You must be signed in to change notification settings

roydukkey/jsx-destruct

Repository files navigation

jsx-destruct

Release Version License

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:

npm install jsx-destruct

Usage

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 (
    <Fragment>
      {isLoading && <p>Loading...</p>}

      {destruct(data, ({ name, description, owner: { login } }) => (
        <Fragment>
          <h1>{name}</h1>
          <h2>by {login}</h2>
          <p>{description}</p>
        </Fragment>
      ))}
    </Fragment>
  );

}

Inspiration

  1. jsx-control-statements' <With /> component
  2. Handlebars' builtin #with helper

About

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

Topics

Resources

Stars

Watchers

Forks

Sponsor this project