react_api_call_useapi_hook_fetch_display_quickstart.ts

1import React from 'react';
2import { UseApi, ApiProvider } from 'react-api-call';
3
4// Define the shape of your data
5interface Todo {
6  id: number;
7  title: string;
8  completed: boolean;
9}
10
11const TodoComponent: React.FC = () => {
12  return (
13    <UseApi<Todo> url="https://jsonplaceholder.typicode.com/todos/1">
14      {({ data, loading, error, reload }) => {
15        if (loading) return <div>Loading...</div>;
16        if (error) return <div>Error: {error.message}</div>;
17        if (!data) return null;
18
19        return (
20          <div>
21            <h1>{data.title}</h1>
22            <p>Status: {data.completed ? 'Completed' : 'Pending'}</p>
23            <button onClick={reload}>Reload Data</button>
24          </div>
25        );
26      }}
27    </UseApi>
28  );
29};
30
31const App: React.FC = () => (
32  <ApiProvider>
33    <TodoComponent />
34  </ApiProvider>
35);
36
37export default App;