marauder v0.0.0

marauder

What is Marauder?

Marauder is...

• A client-side code and data loading/caching solution for React
• Dynamically loads both the code and the data used for a component
• Available now — with Rect 16.8 or greater
• Built on React Suspense, React Router, and React Query
• Less than 900 bytes gzipped

What is a Data Component?

A data component is a JavaScript module that exports not only a functon component used to render the output (normally at default but it can be named), but a also an async load function to preform the data loading for the component.

The code in a data components is dynamically loaded as is the data. The data is cached so re-visiting pages is lightning quick.

Here's a simple example of a data component that renders all gists for a given user.

import React from 'react';
import { useRouteData } from 'marauder';

export async function load({ params }) {
  const { user } = params;
  const res = await fetch(`https://api.github.com/users/${user}/gists`);
  const gists = await res.json();
  return { gists, user };
}

export default function Gists$User() {
  const [data] = useRouteData();
  const { user, gists } = data;
  return (
    <div>
      <h2>Gists for {user}</h2>
      <ul>
        {gists.map(({ id, files }) => (
          <li key={id}>{Object.keys(files)[0]}</li>
        ))}
      </ul>
    </div>
  );
}