Studio React

A React library for building and rendering studio components with Contentstack's Visual Builder. This package provides React components, hooks, and utilities for creating dynamic, editable content experiences.

Prerequisites

Contentstack Delivery SDK. You can follow the instructions to setup the SDK.

Installation

``bash
npm install @contentstack/studio-react
`

Peer Dependencies

This package requires React 16.0.0 or higher:

`json
{
"peerDependencies": {
"react": ">=16.0.0",
"react-dom": ">=16.0.0"
}
}
`

Quick Start

$3

`tsx
import { StudioComponent, useCompositionData } from "@contentstack/studio-react";


// Initialize the SDK
studioSdk.init({
stackSdk: Stack, // Contentstack Delivery SDK
cslp: {
appendTags: true,
},
});

function MyApp() {
const { specOptions, isLoading, error } = useCompositionData({
composableUid: 'your-composition-uid',
});

if (isLoading) return

return ;
}
`

$3

To register components, use the registerComponent function:

`tsx
import { registerComponent } from "@contentstack/studio-react";

function MovingBanner({ children, ...rest }) {
return {children};
}

registerComponents([
{
name: "moving-banner",
displayName: "Moving Banner",
component: MovingBanner,
props: {
children: {
type: "slot",
displayName: "Content",
}
}
},
])
``