https://github.com/ntbosscher/react-api-helpers

https://github.com/ntbosscher/react-api-helpers

Last synced: 26 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ntbosscher/react-api-helpers
• Owner: ntbosscher
• Created: 2020-08-28T15:01:41.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-07-08T13:29:12.000Z (6 months ago)
• Last Synced: 2024-11-21T23:49:53.899Z (about 2 months ago)
• Language: TypeScript
• Size: 180 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        

# Nate's React API Helpers

## Installation

```

npm install nate-react-api-helpers

// or

yarn add nate-react-api-helpers

```

## Usage

1. Setup your API endpoints

```ts

import {APIBase} from "nate-react-api-helpers/APIBase";

class API extends APIBase {

    getCustomers(input: {limit?: number}) {

        return this.fetcher.get("/api/customers", input);

    }

}

interface Customer {

    id: number;

}

export const api = new API();

```

2. Setup auth provider (optional if you use `{withoutAuth: true}` on `useAsync`)

```tsx

import {api} from "../api/API";

import {AuthProvider, useAsyncAction} from "nate-react-api-helpers/Auth"; import {useAuthenticated} from "./Auth";

function App() {

    return (

        

)

}

function LoginModal() {

    const auth = useAuthenticated();

    const login = useAsyncAction(async (input) => {

        if(await api.login(input)) {

            auth.setAuthenticated(true);

        }

        // ...

    }, []);

    

    return (

        

            {/* .. inputs .. */}

             login.callback({username, password})}>

        

    );

}

```

3. Use api endpoints

```tsx

import {useAsync} from "nate-react-api-helpers/AsyncUtils";

import {api} from "../api/API";

import React from "react";

import {Grid} from "@mui/material";

export function Customers() {

    const customers = useAsync(() => api.getCustomers());

    // will show as loading while we aren't authenticated

    // after useAuthenticated().setAuthenticated(true), this will 

    // automatically re-fetch and resolve normally

    if(customers.loadingOrError) {

        return customers.LoadingOrErrorElement;

    }

    

    return (

        

            {(customers.result || []).map(p => 

                {p.name}

            )}

        

    )

}

export function PublicProducts() {

    const products = useAsync(() => api.getProducts(), {withoutAuth: true});

    if(products.loadingOrError) {

        return products.LoadingOrErrorElement;

    }

    return (

        

            {(products.result || []).map(p => 

                {p.name}

            )}

        

    )

}

```

## FAQ

crypto.getRandomValues() not supported...

- Ensure you've imported `react-native-get-random-values` prior to importing any API-related 

files from this package