ranyefet / rest-hooks

Delightful data fetching for React.

Home Page:https://resthooks.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

๐Ÿ›Œ๐ŸŽฃ Rest hooks

CircleCI Coverage Status npm downloads bundle size npm version PRs Welcome Chat

Dynamic data at scale. Performance, consistency, typing for REST, proto, GraphQL, websockets and more.

Simple TypeScript definition

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

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

One line data hookup

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

Mutation

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

And subscriptions

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

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

For the small price of 7kb gziped. ย ย  ๐ŸGet started now

Features

Special thanks

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

ezoic increase your site revenue

About

Delightful data fetching for React.

https://resthooks.io


Languages

Language:TypeScript 81.7%Language:JavaScript 17.5%Language:CSS 0.7%Language:Dockerfile 0.0%