Skip to content
A lightweight dependency-free library for fetching data over REST with React.
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs: add missing comma to code sample import (#52) Aug 8, 2019
example Add codesandbox template definition Nov 19, 2019
src Add persistence capabilities to the client (initialCache) (#50) Aug 7, 2019
.eslintignore add linting Mar 28, 2019
.eslintrc.js update deps (#49) Jul 11, 2019
.github_changelog_generator
.gitignore
.gitlab-ci.yml
.npmignore Optimize build (minor) (#15) May 13, 2019
.prettierrc.yaml add linting Mar 28, 2019
.sail.yml Add sailci config for PRs Jun 7, 2019
CHANGELOG.md v0.6.0 Aug 7, 2019
LICENSE Change licence to MIT May 23, 2019
README.md Release prep (#35) May 26, 2019
jest.config.js Separate client (#28) May 24, 2019
package-lock.json update dependencies (#51) Aug 7, 2019
package.json v0.6.0 Aug 7, 2019
tsconfig.json Optimize build (minor) (#15) May 13, 2019

README.md

Tipple logo

A lightweight dependency-free library for fetching data over REST in React.

Gitlab pipeline status coverage version size licence

What is Tipple?

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.

How does it work?

There's two key parts to Tipple:

  1. Request state management - a fancy way of saying Tipple will manage the numerous states of your API calls so you don't have to.
  2. Domain based integrity - because each request is tied to a domain (e.g. users, posts, comments), Tipple can force data to be re-fetched whenever domain(s) have been mutated.

Getting started

Install tipple

I'm sure you've done this before

npm i tipple

Configure the context

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>
);

Start requesting

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>
    </>
  );
};

Further documentation

For more advanced usage, check out the docs.

There's also an example project if you're into that kind of thing.

You can’t perform that action at this time.