@steedos-builder/react v1.0.0
Steedos Builder React SDK
See our main readme for info on getting started with the React SDK
React API
BuilderComponent
Simple example
// Render a matching Builder page for the given URl
<BuilderComponent model="page">
Passing content manually
const content = await builder.get('page', { ...options });
if (content) {
document.title = content.data.title; // You can use custom fields from the response
return <BuilderComponent model="page" content={content} >
}
Passing data and functions down
<BuilderComponent
model="page"
data={{
products: productsList,
foo: 'bar'
}} >
You can also pass down functions, complex data like custom objects and libraries you can use context
. Similar to React context, context passes all the way down (e.g. through symbols, etc). This data is not observed for changes and mutations
<BuilderComponent
model="page"
context={{
addToCart: () => myService.addToCart(currentProduct),
lodash: lodash,
}} >
Passing complex
Everything passed down is available on the state
object in data and actions - e.g. state.products[0].name
Advanced querying
import { BuilderComponent, builder } from '@steedos-builder/react';
builder.setUserAttributes({ isLoggedIn: false })
export default () => <div>
<BuilderComponent
model="section"
options={{ query: { 'data.something.$in': ['value a', 'value b'] } }} />
<!-- some other content -->
</div>
contentLoaded
<BuilderComponent
model="page"
contentLoaded={data => {
document.title = data.title; // E.g. if your custom field is called `title`
}}
/>
Builder
The global Builder
singleton has a number of uses. Most important is registering custom components.
import * as React from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { Builder } from "@steedos-builder/react";
class CodeBlockComponent extends React.Component {
render() {
return (
<SyntaxHighlighter language={this.props.language}>
{this.props.code}
</SyntaxHighlighter>
);
}
}
Builder.registerComponent(CodeBlockComponent, {
name: "Code Block",
inputs: [
{
name: "code",
type: "string",
defaultValue: "const incr = num => num + 1"
},
{
name: "language",
type: "string",
defaultValue: "javascript"
}
]
});
BuilderContent
Usage with Data Models
Example, setting up an editable theme:
<BuilderContent model="site-settings"> { (data, loading) => {
If (loading) {
return <Spinner />
}
return <>
/*pass values down to an example ThemeProvider, used as a wrapper in your application*/
<ThemeProvider theme={data.theme} >
{props.children}
</ThemeProvider>
</>
}}
</BuilderContent>
Usage with Page/Section Custom Fields
Example, passing Custom Field input:
<BuilderContent model="landing-page">
{data => {
/*use your data here within your custom component*/
return (
<>
<FeaturedImage image={data.featuredImage} />
<BuilderComponent content={content} model="landing-page" />
</>
);
}}
</BuilderContent>
Passing content manually
const content = await builder.get(‘your-data-model’, { ...options });
if (content) {
/*use your data here*/
return <BuilderContent model="your-data-model" content={content} >
}
Advanced querying
import { BuilderContent, builder } from '@steedos-builder/react';
builder.setUserAttributes({ isLoggedIn: false })
export default () => <div>
<BuilderContent
model="your-data-model"
options={{ query: { 'data.something.$in': ['value a', 'value b'] } }} />
<!-- some other content -->
</div>
builder
import { builder } from "@steedos-builder/react";
builder.init(YOUR_KEY);
// Optional custom targeting
builder.setUserAttributes({
userIsLoggedIn: true,
whateverKey: "whatever value"
});
3 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago