Notorious Public Menace

    react-sadness

    1.0.0-rc.2 • Public • Published

    react-sadness

    CI Workflow pre-commit code style: prettier npm version npm license

    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

    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.

    Install

    npm i react-sadness

    DownloadsWeekly Downloads

    3

    Version

    1.0.0-rc.2

    License

    BSD-3-Clause

    Unpacked Size

    72.4 kB

    Total Files

    40

    Last publish

    Collaborators

    • playpausenstop