open-index/open-npm huggingface dataset:
npm package: @itxadummy/demo-lib
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.4.
Latest version: 0.0.4

# DemoLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.4.

## Code scaffolding

Run `ng generate component component-name --project demo-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project demo-lib`.
> Note: Don't forget to add `--project demo-lib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build demo-lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build demo-lib`, go to the dist folder `cd dist/demo-lib` and run `npm publish`.

## Running unit tests

Run `ng test demo-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @itxbornfire/react-query
Description: From a medium article by Tim Kolberger, https://medium.com/@TimKolb/creating-a-reusable-react-query-component-for-your-rest-api-1aa91ef2551b
Author: Aliziwe
Latest version: 1.0.1

# @itxbornfire/react-query

From Tim's article, and the codesandbox he peovided, this is how a basic component should look like.
Of course you can style it as you wish as shown here https://codesandbox.io/s/92n5zmoq2y?from-embed .

```JavaScript
  import React, { Fragment } from "react";
  import { Query } from "@itxbornfire/react-query";
  
  import {
    LoadingComponent,
    ErrorComponent
  } from ".../path/to/your/components";

  export const BasicQuery = () => (
    <Fragment>
      <h2>BasicQuery</h2>
      <Query url="https://api.github.com">
        {({ state: { data, loading, error }, actions }) => {
          if (loading) {
            return <LoadingComponent />;
          }

          if (error) {
            return <ErrorComponent error={error} />;
          }

          if (data) {
            return (
              <React.Fragment>
                <button onClick={actions.fetch}>
                  Reload
                </button>
                {
                  //render your data
                }
              </React.Fragment>
            );
          }

          return null;
        }}
      </Query>
    </Fragment>
  );
  
```
Here's an interactive sandbox, the original sandbox by Tim himself.

[![Edit 92n5zmoq2y](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/92n5zmoq2y)