# @ajxb/userequest

> A lazy, type-safe approach to API requests in modern React

Latest version **1.3.3** (published 2024-05-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install @ajxb/userequest
pnpm add @ajxb/userequest
yarn add @ajxb/userequest
bun add @ajxb/userequest
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2024-05-16 |
| First published | 2023-02-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 95.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | ajxb & Dustin J. |
| Maintainers | ajxb |

## Links

- npm: https://www.npmjs.com/package/@ajxb/userequest
- Repository: https://github.com/MrgSub/useRequest
- Homepage: https://github.com/MrgSub/useRequest#readme
- Issues: https://github.com/MrgSub/useRequest/issues
- npm.io page: https://npm.io/package/@ajxb/userequest

## Recent versions

- 1.3.3 (latest) — 2024-05-16
- 1.3.2 — 2024-02-12
- 1.3.1 — 2024-02-11
- 1.3.0 — 2024-01-03
- 1.2.0 — 2023-10-04
- 1.1.2 — 2023-10-04
- 1.1.1 — 2023-10-04
- 1.1.0 — 2023-05-10
- 1.0.2 — 2023-02-07
- 1.0.1 — 2023-02-07
- 1.0.0 — 2023-02-07

## README

## useRequest - A "Lazy" dev's hook

### Dependencies:

- We use `camelCase` `capitalize` from `lodash`
- We use `AxiosError` from `axios` (We assume you're using Axios)
- We use `createContext` `useContext` `useReducer` from `react`

### Example:

```typescript jsx

// Simple login function using Axios
interface ILogin {
    username: string;
    password: string;
}

const handleLogin = ({username, password}:ILogin) => {
    return axios.post('/auth/login', {username, password})
}

const MyComponent = () => {
    // Typescript friendly return type
    const {
        handleLoginRequest,
        handleLoginLoading,
        handleLoginResponse,
        handleLoginError,
    } = useRequest(handleLogin, 'handleLogin');
    
    
    // Handle API success
    useEffect(()=>{
        if (handleLoginResponse) {
            // Login successful 
        }
    },[handleLoginResponse])

    // Handle API errors
    useEffect(()=>{
        if (handleLoginError) {
            // Login failed 
        }
    },[handleLoginError])
    
    // Submit the form
    const onSubmit = (data: ILogin) => handleLoginRequest({username: data.username, password: data.password})
    
    // Example button that's disabled while loading
    return <div>
        <button disabled={handleLoginLoading} onClick={onSubmit}></button>
    </div>
}

```

### Quickstart:

`npm i @ajxb/userequest`

```typescript
import {useRequest} from '@ajxb/userequest'
```

```typescript
const {} = useRequest<MyInterface,'myFunction'>(myFunction, 'myFunction')
```

#### Known ughs:

- `function.name` is an es6 feature which doesn't exist anymore, might make a workaround. For now, you should pass the function name as a second argument

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