RichText
The RichText
control provides your component with a ReactNode
of text that can be visually edited within the
Makeswift builder.
AnchorExamples
AnchorA hero section with distinct RichText controls
In this example we register a Hero
component and control its title
and body
prop using RichText
controls.
import { ReactRuntime } from '@makeswift/runtime/react'
import { RichText, Image } from '@makeswift/runtime/controls'
import NextImage from 'next/image'
const Hero = forwardRef(function Hero({ title, body, image }, ref) {
return (
<div ref={ref} style={{ display: 'flex', gap: '20px' }}>
<div>
{title}
{body}
</div>
<NextImage
src={image?.src}
height={image?.dimensions.height}
width={image?.dimensions.width}
/>
</div>
)
})
ReactRuntime.registerComponent(Hero, {
type: 'hero',
label: 'Hero',
props: {
title: RichText(),
body: RichText(),
image: Image({ format: Image.Format.WithDimensions }),
},
})
AnchorAPI
AnchorParameters
The RichText
control currently doesn't take any parameters.
AnchorProvided value
The RichText
control provides a ReactNode
value to your component.