@builder.io/sdk-react

NOTE

At the moment, we are investigating some performance issues in our gen2 React SDK that prevent us from recommending it over the gen1 React SDK for all customer use-cases. Our team is actively working on these issues, and once they are resolved our recommendation will be to use the gen2 React SDK.

Builder.io React SDK v2

This is the React v2 SDK, @builder.io/sdk-react. It is a complete rewrite of the React SDK, and has the following benefits:

• zero client-side dependencies
• far smaller bundle size (25kb)

NOTE: if you are using the SDK in a webapp that gets deployed on a serverless environment (like Next or Hydrogen), you might need to import the SDK from @builder.io/sdk-react/edge. This is a special import that handles edge cases surrounding serverless environments.

API Reference

To use the SDK, you need to:

• fetch the builder data using fetchOneEntry: you can see how to use it here https://www.builder.io/c/docs/content-api, and how it differs from the React V1 SDK's builder.get() function.

• pass that data to the Content component. Here is a simplified example showing how you would use both:

import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-react';
import { useEffect, useState } from 'react';

const BUILDER_PUBLIC_API_KEY = 'YOUR API KEY';

function App() {
  const [content, setContent] = useState(undefined);

  useEffect(() => {
    fetchOneEntry({
      model: 'page',
      apiKey: BUILDER_PUBLIC_API_KEY,
      userAttributes: {
        urlPath: window.location.pathname || '/',
      },
    }).then((content) => {
      setContent(content);
    });
  }, []);

  const shouldRenderBuilderContent = content || isPreviewing();

  return shouldRenderBuilderContent ? (
    <Content content={content} model="page" apiKey={BUILDER_PUBLIC_API_KEY} />
  ) : (
    <div>Content Not Found</div>
  );
}

Look at the examples for more information.

Mitosis

This SDK is generated by Mitosis. To see the Mitosis source-code, go here.

Feature Support

To check the status of the SDK, look at these tables.

Getting Started

npm install @builder.io/sdk-react

Examples

• React + Vite
• Next.js App Router
• Next.js Pages Router

Fetch

This Package uses fetch. See these docs for more information.