How to add custom components to the Next js post template?

[thepartisan101]

Hi, I'd like to add an accordion element (example from Semantic UI: https://react.semantic-ui.com/modules/accordion/) to have more information be shown in the post on click by the user. How should I go about configuring the react components so that they point to the right variable coming from the Ghost content API (within the mobiledoc format)?

Should I add a tag to that text and assign it in the component class/find a way to pass it as props? ` render() { const { activeIndex } = this.state

return (
  <Accordion>
    <Accordion.Title
      active={activeIndex === 0}
      index={0}
      onClick={this.handleClick}
    >
      <Icon name='dropdown' />
      What is a dog?
    </Accordion.Title>
    <Accordion.Content active={activeIndex === 0}>
      <p class="tag-data-from-mobiledoc">
        A dog is a type of domesticated animal. Known for its loyalty and
        faithfulness, it can be found as a welcome guest in many households
        across the world.
      </p>
    </Accordion.Content>`

Thanks for any help!

[styxlab]

This type of customization is currently not supported as this is not part of the default Ghost theme, but you can of course fork the code and do whatever you like. Principally, there are three aspects to this:

1. How is the data entered in headless Ghost (I guess with an html or markdown card?)
2. How can the accordion html/markdown be detected in next-cms-ghost?
3. Implement an React component that provides the accordion functionality.

Note that next-cms-ghost transforms the all html coming from Ghost into a syntax tree (HAST), which can be easily mutated with React components. Have a look at the implementation of the Next.js Image component in order to see how this can be done.

[styxlab]

Closed as answered.