Usage
Learn how to use the Codespark component in your React application.
Basic Usage
Pass your code as a string to the Codespark component:
import { } from '@codespark/react';
const = `export default function App() {
return (
<div className="text-center">
<h1 className="text-xl font-bold">Hello World</h1>
<p>This is my first Codes Park!</p>
</div>
);
}`;
export default function () {
return < ={} />;
}Note
To render something in the preview, the preview code must have an export function to tell Codespark which component to render. The function name is not restricted.
Following export patterns are supported:
- Named default exports:
export default function App() {...} - Unnamed default exports:
export default function() {...} - Named exports:
export function Button() {...} - Default exports with arrow function:
export default () => {...}
Customize Your Own
Codespark features a modular architecture with composable components. Mix and match CodesparkEditor, CodesparkPreview, and other building blocks to create your own custom layout.
import { CodesparkEditor, CodesparkPreview, CodesparkProvider } from '@codespark/react';<CodesparkProvider>
<CodesparkEditor />
<CodesparkPreview />
</CodesparkProvider>Next.js Resolving
Since Codespark relies on React context API, it must run on the client side and be treated as client component in Next.js. Create a wrapper file with the 'use client' directive and re-export the components:
'use client'
export * from '@codespark/react';import { Codespark } from '@components/codespark';Last updated on