Adapters
React

React Adapter

The @ibnlanre/builder package provides a set of hooks and components that make it easier to work with builder objects in a React application. The React adapter, which is an extension of the @ibnlanre/builder package, simplifies the process of creating and consuming builder objects in a React application.

This guide explains how to use the React adapter to create and consume builder objects in a React application.

createBuilderProvider

The React adapter exports a createBuilderProvider function that can be used to create a provider for builder objects in a React application. The createBuilderProvider function takes an object with builder objects as its argument and returns an object with the useBuilder hook and the BuilderProvider component.

Within a TypeScript (opens in a new tab) environment, the createBuilderProvider does not need to be typed, as its type is inferred from the builder objects passed to it.

App.tsx
import { createBuilder } from "@ibnlanre/builder";
import { createBuilderProvider } from "@ibnlanre/builder/react"
 
const userBuilder = createBuilder({
  user: {
    name: "John Doe",
    age: 30,
  },
});
 
const locationBuilder = createBuilder({
  location: {
    country: "Nigeria",
    city: "Lagos",
  },
});
 
export const { useBuilder, BuilderProvider } = createBuilderProvider({
  locationBuilder,
  userBuilder,
});

BuilderProvider

The BuilderProvider component is a context (opens in a new tab) provider that provides the builders prop to all its children. It is expected to be used in the root of your application. Alternatively, you can provide the BuilderProvider in a specific part of your application, under which children components can access the builders prop. The BuilderProvider component does not require any prop outside its children.

App.tsx
...
import { PropsWithChildren } from "react";
 
interface AppProps extends PropsWithChildren { }
 
export function App({ children }: AppProps) {
  return (
    <BuilderProvider>
      {children}
    </BuilderProvider>
  );
}

useBuilder

The useBuilder hook is used to access the builders prop in any child component. It returns the builders prop provided by the BuilderProvider component. This allows you to access the required builder object in any child component of the BuilderProvider component. The useBuilder hook does not require any argument.

User.tsx
import { useBuilder } from "../App";
 
export function User() {
  const { userBuilder } = useBuilder();
  const { name, age } = userBuilder.$use.user;
 
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
}

Summary

The React adapter provides a set of hooks and components that make it easier to work with builder objects in a React application. The createBuilderProvider function is used to create a provider for builder objects in a React application. The BuilderProvider component is a context (opens in a new tab) provider that provides the builders prop to all its children. The useBuilder hook is used to access the builders prop in any child component.

Next Steps

Managing StateModular Types