# react-state-bridge

> Global state management library with data and API interactions

Latest version **1.0.10** (published 2023-08-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-state-bridge
pnpm add react-state-bridge
yarn add react-state-bridge
bun add react-state-bridge
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2023-08-20 |
| First published | 2023-08-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | lindow |
| Maintainers | lindow |
| Keywords | react, state, axios, HTTPS, api |

## Links

- npm: https://www.npmjs.com/package/react-state-bridge
- Repository: https://github.com/Lindow-ai/react-state-bridge
- Homepage: https://github.com/Lindow-ai/react-state-bridge#readme
- Issues: https://github.com/Lindow-ai/react-state-bridge/issues
- npm.io page: https://npm.io/package/react-state-bridge

## Dependencies (7)

- [axios](https://npm.io/package/axios.md) ^1.4.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [typescript](https://npm.io/package/typescript.md) ^5.1.6
- [@types/jest](https://npm.io/package/@types/jest.md) ^29.5.3
- [@types/node](https://npm.io/package/@types/node.md) ^20.5.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.2.20
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.7

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2023-08-20
- 1.0.9 — 2023-08-20
- 1.0.8 — 2023-08-20
- 1.0.6 — 2023-08-20
- 1.0.5 — 2023-08-20
- 1.0.4 — 2023-08-20
- 1.0.3 — 2023-08-20
- 1.0.2 — 2023-08-16
- 1.0.1 — 2023-08-16
- 1.0.0 — 2023-08-16

## README

[![npm version](https://badge.fury.io/js/react-state-bridge.svg)](https://badge.fury.io/js/react-state-bridge.svg)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

# react-state-bridge

> A custom React hook to simplify all api calls between frontend and backend and manage the various main states that result.

## Table of contents

- [react-state-bridge](#react-state-bridge)
  - [Table of contents](#table-of-contents)
  - [Getting Started](#getting-started)
  - [Installation](#installation)
  - [Usage](#usage)
  - [API](#api)
    - [useBasicFetch](#useDateFetch)
  - [Authors](#authors)

## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

## Installation

To install and set up the library, run:

```sh
$ npm i react-state-bridge
```

## Usage

To use the `useDataFetch` hook, follow these steps:

1. Import the hook in your component file:

```ts
import useDataFetch from 'react-state-bridge';
```

2. Call the useDataFetch hook in your functional component, providing the URL for the GET request as the first parameter. You can also pass optional parameters and an optional token for authorization:

```ts
type YourDataType = {
  // ... Your data type logic ...
}

type YourDataType2 = {
    // ... Your data type logic ...
}

const MyComponent = () => {
  const url = 'https://api.example.com/data'
  const url2 = 'https://api.example2.com/data'

  const token = env.YOUR_TOKEN

  const params = {
     yourparams1: 'params1',
     yourparams2: 'params2',
     yourparams3: 'params3'
  }
  const params2 = {
     yourparams4: 'params4',
     yourparams5: 'params5',
     yourparams6: 'params6'
  }

  const headers = {
    // ... Your headers ...
  }
  const headers2 = {
    // ... Your headers ...
  }

  const fetchResult = useDataFetch<YourDataType[]>(url, params, token, headers)
   const fetchResult2 = useDataFetch<YourDataType2[]>(url2, params2, token, headers2);

// Using data for the first call

  const { data: data, isLoading: isLoading, error: error, messageSucess: messageSucess } = fetchResult

// Use of data for a possible second call

  const { data: data2, isLoading: isLoading2, error: error2, messageSucess: messageSucess2 } = fetchResult2

  // ... Your component logic ...
}
```

3. The hook returns an object with the following properties:
  - `data`: The fetched data from the API.
  - `isLoading`: A boolean indicating whether the data is currently being fetched.
  - `error`: An error message in case the request fails.
  - `messageSuccess`: A success message if the request is successful.  

## Exemple

```ts
import React from 'react';
import {useDataFetch} from 'react-state-bridge';

type PostData = {
  userId: number;
  id: number;
  title: string;
  body: string;
}

const MyComponent: React.FC = () => {
  const apiUrl = 'https://jsonplaceholder.typicode.com/posts';
  const yourAuthToken = env.YOUR_TOKEN;
  const yourHeader = {
    'apiKey': 'your-key',
    'host': 'jsonplaceholder.typicode.com'
  }

  const fetchPostResult = useDataFetch<PostData[]>(url, null, yourAuthToken, yourHeader)

  const { data: postData, isLoading: isPostLoading, error: postError, messageSucess: postMessageSucess } = fetchPostResult

  return (
    <div>
      {isPostLoading && <p>Loading...</p>}
      {postData && (
        <div>
          {postData.map(post => (
            <div key={post.id}>
              <h2>{post.title}</h2>
              <p>{post.body}</p>
            </div>
          ))}
        </div>
      )}
      {error && <p>Error: {error}</p>}
      {postMessageSucess && <p>{messageSucess}</p>}
    </div>
  );
};

export default MyComponent;
```

## API

### useDateFetch

```ts
useDateFetch(url: AxiosRequestConfig['url'] = '', params?: AxiosRequestConfig['params'], token?: string, headers?: 
AxiosRequestConfig['headers'])
```

## Authors

* **Lindow** - *react-state-bridge* - [Lindow](https://github.com/Lindow-ai)

## Issues

If you have a bug or suggestions for improvement, don't hesitate to report it, right here. [issues](https://github.com/Lindow-ai/react-state-bridge/issues)

---
_Source: https://npm.io/package/react-state-bridge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._