@bovine/cattle-grid-preact

• docs
• storybook

Preact component to simplify using the cattle-grid API.

• @cattle-grid/account-api documentation
• moo-web is an application build with this framework. source

API

The API of this module is the component CattleGridApp and the contexts from context.ts.

Usage

Define your component

The following illustrates a simple component, that looks up an actor

import { useContext } from "preact/hooks";
import { SelectedActorContext } from "@bovine/cattle-grid-preact";
import { lookup } from "@cattle-grid/account-api";

export function LookupHelge() {
    const selectedActor = useContext(SelectedActorContext);

    async function doLookup() {
        const result = await lookup({ body: { actorId: selectedActor, uri: "acct:helge@bovine.social" }})
        console.log(result.data);
    }

    return <></>
}
Copy

here selectedActor is an account from your cattle_grid account.

Use your component

Then use this component via

import { render } from "preact";
import CattleGridApp from "@bovine/cattle-grid-preact";
import { LookupHelge } from "./LookupHelge";

export function App() {
  return (
    <CattleGridApp title="demo">
      <LookupHelge />
    </CattleGridApp>
  );
}

render(<App />, document.getElementById("app")!);
Copy

The CattleGridApp component ensures that the client of @cattle-grid/account-api is properly configured and an actor is selected.

One can set the cattle_grid api url with the baseUrl parameter.

Development

Storybook

Generate the MSW service worker and the MSW Docs.

npx msw init public/
Copy

then you can run storybook via

npm run storybook
Copy