A lightweight dependency-free library for fetching data over REST in React.
Tipple is simple - so simple in fact, it has no dependencies.
If you're working with REST and want an easy way to manage data fetching on the client side, this might just be the way to go.
There's two key parts to Tipple:
I'm sure you've done this before
npm i tipple
Tipple exposes the client using React's context. You'll want to put the provider in the root of your project in order to use the useFetch and usePush hooks.
import { createClient, TippleProvider } from 'tipple';
import { AppContent } from './AppContent';
const client = createClient({ baseUrl: 'http://localhost:1234/api' });
export const App = () => (
<TippleProvider client={client}>
<AppContent />
</TippleProvider>
);
The useFetch hook will fetch the data you need on mount
import { useFetch } from 'tipple';
interface User {
id: number;
name: string;
}
const MyComponent = () => {
const [state, refetch] = useFetch<User[]>('/', { domains: ['users'] });
const { fetching, error, data } = state;
if (fetching && data === undefined) {
return <p>Fetching</p>;
}
if (error || data === undefined) {
return <p>Something went wrong</p>;
}
return (
<>
{data.map(user => (
<h2 key={user.id}>{user.name}</h2>
))}
<button onClick={refetch}>Refetch</button>
</>
);
};
For more advanced usage, check out the docs.
There's also an example project if you're into that kind of thing.