react-sadness

useRequest hook & set of components for requesting API data within React applications.

• Built on top of axios
• Supports prerendering
• Provides common components for API needs

Requirements

• React 16.13 or later

Installation

npm install axios react react-dom react-sadness

IMPORTANT: You need to install axios, react & react-dom in your project additionally, as they listed as peer dependencies to react-sadness. Installing just react-sadness will not be enough.

Quickstart

First, you need to wrap your app container into the SadnessProvider & mount it into the DOM element (instead of render or hydrate),

import React from "react";
import { mount, SadnessProvider } from "react-sadness";
import { BrowserRouter } from "react-router";

mount(
  <SadnessProvider>
    <AppContainer />
  </SadnessProvider>,
  document.getElementById("ui")
);

Next, to request data from the API anywhere inside of AppContainer,

import I from "immutable";
import React from "react";
import { Response, useRequest } from "react-sadness";

import { toUser } from "../records/User";

const toList = (data) => new I.List(data.map(toUser));

const Users = () => {
  const { state } = useRequest("/users", { responseDataConverter: toList });
  return (
    <Response state={state}>
      {(users) => (
        <ul>
          {users.map((item) => (
            <li key={item.id}>{item.username}</li>
          ))}
        </ul>
      )}
    </Response>
  );
};

Prerendering

IMPORTANT: Example below illustrates prerendering data with parcel-plugin-prerender plugin.

react-sadness supports prerendering by triggering readyEvent via SadnessReady HoC.

import { SadnessReady } from "react-sadness";

const App = () => (
  {/* Ready event will trigger after both child requests will done */}
  <SadnessReady>
    {/* Request projects from API */}
    <Projects />
    {/* Request talks from API */}
    <Talks />
  </SadnessReady>
)

Afterwards, you need to setup parcel-plugin-prerender to wait before readyEvent, such as,

  "prerender": {
    "rendererConfig": {
      "renderAfterDocumentEvent": "react-sadness-ready"
    }
  }

In case if children nodes does not contain any planned API requests, pass force prop to SadnessReady component to force triggering ready event,

const About = () => (
  <SadnessReady force>
    <AboutContent />
  </SadnessReady>
);

Examples

Visit react-sadness.vercel.app to browse through react-sadness Storybook.

Or run,

make run

to start Storybook server at http://localhost:6006.