React.js with typescript and prismic

Developing with Prismic
1

Hi Team,

I am trying to create website with create react app(typescript) and Prismic. My website will be more dynamic where the editors will manage(add/edit/delete) the pages/slices on prismic . Have few questions on that.

  1. Do we have any prismic controls or npm modules available on react space to render the components.As I said my page is more dynamic, I do not want to iterate the json data and check each every fields of an object.
  2. Can you share some source code / github link that have React+typescript stack for prismic

Thanks,
Pratha

3

Hey @pratha.arun welcome to the Community

For the first topic, could you give me some more details about your project to understand your needs better?

Is it automatic re-building what you need to reload the new data coming from prismic? If that's so, you can use Webhooks and connect them to your deployment service

For typescript, The @prismicio/client and @prismicio/helpers already have support for typescript. You can checkout the examples for each kit to see how it's done

4

Thanks Paulina for your kind support.

I have few pages in my react web application that gets content from headless CMS. For Ex:
My homepage have following sections and 90%of them are content manages

  1. Banner section
    1. Product image carousal
  3. Two column (text & Image) section

All the above sections are highly dynamic. The editor can have the ability to add extra text elements into banner. So when I create the banner component in react.js, should I add all the possible element of banner in my code? or is there anyway to simplify that?. I'm looking for a wrapper control that will render all the child elements of the banner. I believe the rich text npm module does the same for rich text component.

Can you share the prismic space details for one of the react example (prismic theme --theme-url GitHub - prismicio/reactjs-website --conf src/prismic-configuration.js)

Thanks,
Pratha

6

Hi @pratha.arun,

Thanks for this information. I'm not sure I completely understand your use case, but I can make some suggestions.

There are a few ways to make dynamic content:

  1. As you said, the Rich Text field is quite dynamic. If you use an HTML Serializer with the Rich Text field, you can make the content highly customizable.
  2. The Group field allows you to repeat content. So, you could create a Group field for your image carousel, and add images as needed.
  3. Slices allow you to add and rearrange components in your content. You can add as many Slices as you want to a document. So, you could create a "Banner" Slice, an "Image Carousel" Slice, and a "Two Column" Slice. Each Slice includes an optional "Repeatable Zone," which acts just like the group field. Slices are the best way to create dynamic content in Prismic.

I hope that helps. Please let me know if you need more, or if I didn't answer your question.

Best,
Sam

8

This thread has been closed due to inactivity. Flag to reopen.