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.