dwidge_hooks_react_useasync_loading_error_state_quickstart.ts

1import React from 'react';
2import { useAsync } from '@dwidge/hooks-react';
3
4const fetchData = async (): Promise<string> => {
5  return new Promise((resolve) => {
6    setTimeout(() => resolve("Hello from @dwidge/hooks-react!"), 1000);
7  });
8};
9
10export const AsyncComponent: React.FC = () => {
11  const { result, loading, error, execute } = useAsync(fetchData);
12
13  return (
14    <div>
15      <button onClick={execute} disabled={loading}>
16        {loading ? 'Loading...' : 'Fetch Data'}
17      </button>
18      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
19      {result && <p>Result: {result}</p>}
20    </div>
21  );
22};
23
24export default AsyncComponent;