fashiontale-rest-hooks

Delightful data fetching for React

Usage no npm install needed!

<script type="module">
  import fashiontaleRestHooks from 'https://cdn.skypack.dev/fashiontale-rest-hooks';
</script>

README

๐Ÿ›Œ๐ŸŽฃ Rest hooks">

CircleCI Coverage Status npm downloads bundle 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 | undefined = undefined;
  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({ id }, data)} />;

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
  • โ›“๏ธ React Concurrent mode compatible
  • ๐ŸŽฃ Simple declarative API
  • ๐Ÿ’ฐ Normalized response configurable 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.