Skip to main content

farrow-react

React adapter for farrow-http.

Installation

yarn add farrow-react

API

useReactView

For rendering React Element to Response of farrow-http.

Type

const useReactView: (options?: ReactViewOptions | undefined) => {
  render: <T extends JSX.Element>(element: T) => Http.Response;
};

Usage

import { Http } from "farrow-http";
import { useReactView } from "farrow-react";

const PORT = 3000;

const http = Http();

http.use(async (req) => {
  const ReactView = useReactView({
    docType: "<!doctype html>",
    useStream: true,
  });

  const element = <div>Hello Farrow</div>;

  return ReactView.render(html);
});

app.listen(PORT, () => {
  console.log(`Example app listening at http://localhost:${PORT}`);
});

Options

export type ReactResponseOptions = {
  docType?: string;
};
export type ReactViewOptions = ReactResponseOptions & {
  useStream?: boolean;
};
  • docType

Type:

docType?: string

For setting html doc type.

Default: "<!doctype html>"

  • useStream

Type:

useStream?: boolean

For setting if use stream to do the response.

Default: false

usePrefix

Type

const usePrefix: () => string;

Usage

import { usePrefix } from "farrow-react/hooks";
const Test = () => {
  const prefix = usePrefix();
  return <div>{prefix}</div>;
};

useRenderContext

Type

export type ReactRenderContext = {
  basenames: string[];
};

const useRenderContext: () => ReactRenderContext;

Usage

const Test = () => {
  let renderContext = useRenderContext();
  return <div>{renderContext.basenames.join("")}</div>;
};

Type

const Link: (props: React.ComponentPropsWithoutRef<"a">) => JSX.Element;

Usage

import { Link } from "farrow-react/Link";

const Test = () => {
  // Link's props is equal to <a />
  return <Link href="/">a link</Link>;
};

Learn more

Relative Module
  • farrow-http: A Type-Friendly Web Framework.
  • react: A JavaScript library for building user interfaces.
Sample