Pular para o conteúdo principal

VisualContent

Callable

  • Renders HTML content from data returned by a Visual Editor field on Starlight.

    The only required prop is content, which is the data returned by a Visual Editor field. Additionally, you can provide custom components to render each data block type.

    You can also pass the excerpt boolean prop to only render a portion of the content, which is useful to summarize the content in lists.

    To learn how to customize the rendered content, take a look at the Customizing the output guide page.

    @example

    Requesting an entry and rendering its content.

    Assume we created a “Posts” model with a slug of posts, and placed a Visual Editor field with a key of post_content on it.

    import Starlight, { VisualContent } from '@starlightcms/react-sdk'

    const EntryComponent = ({ slug }) => {
      const [entry, setEntry] = useState(null)

      // This is just an example, you could fetch
      // the entry any way you want.
      useEffect(async () => {
        const response = await Starlight.posts.entries.get(slug)

        setEntry(response.data)
      }, [ slug ])

      // After fetching, content will be on the `entry.data.post_content` property.
      return (
        entry ? (
           <article>
             <h1>{entry.title}</h1>
             <VisualContent content={entry.data.post_content} />
           </article>
        ) : (
          <div>Loading...</div>
        )
      )
    }

    Parameters

    Returns Element