Skip to content

Zizzamia/rest-hooks

 
 

Repository files navigation

🛌🎣 Rest hooks

CircleCI Coverage Status npm downloads gzip size npm version PRs Welcome

Making dynamic sites performant, scalable, simple to build with any API design.

Simple TypeScript definition

class ArticleResource extends Resource {
  readonly id: number | null = null;
  readonly title: string = '';
  readonly body: string = '';

  pk() { return this.id; }
  static urlRoot = '/articles/';
}

One line data hookup

const article = useResource(ArticleResource.detailShape(), { id });
return (
  <>
    <h2>{article.title}</h2>
    <p>{article.body}</p>
  </>
);

Mutation

const update = useFetcher(ArticleResource.updateShape());
return <ArticleForm onSubmit={data => update(data, { id })} />;

And subscriptions

const price = useResource(PriceResource.detailShape(), { symbol });
useSubscription(PriceResource.detailShape(), { symbol });
return price.value;

...all typed ...fast ...and consistent

For the small price of 7kb gziped.    🏁Get started now

Features

  • TS Strong Typescript types
  • 🛌 React Suspense support
  • 🎣 Simple declarative API
  • 💰 Normalized response caching
  • 💥 Tiny bundle footprint
  • 🛑 Automatic overfetching elimination
  • ✨ Optimistic updates
  • 🧘 Flexible to fit any API design (one size fits all)
  • 🌳 Tree-shakable (only use what you need)
  • 🔁 Subscriptions
  • ♻️ Optional redux integration
  • 📙 Storybook mocking
  • 📱 React Native support
  • 🚯 Pluggable garbage collection policy

Special thanks

Thanks to @0xcaff, @melissafzhang and @alexiswolfish for their valuable feedback.

About

Delightful data fetching for React.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 83.2%
  • JavaScript 13.4%
  • CSS 2.5%
  • Other 0.9%