Creating excerpts using Contentfuls rich text react render

Question

I am figuring out how to bring an excerpt into my site, using the Contentful Rich Text React Renderer.

I am struggling a little this is the first time I am using it. I have used MD in the past with contentful, but due to users i require rich test.

This is my query.

export const query = graphql`
    query($slug: String!) {
        contentfulJobListings(slug: { eq: $slug }) {
            jobTitle
            jobPostedDate(formatString: "MMMM Do, YYYY")
            jobSalaryN
            jobLocation
            jobDescription {
                json
            }
        }

    }
`

and this is how i am i producing the rich text on the page <div>{documentToReactComponents(props.data.contentfulJobListings.jobDescription.json)}</div>

I would like to create an excerpt to explain a little before jumping into the post.

If anyone could help with this that would be great. As im at a loose end.

Answer 1

I ran into the same problem as you when I was making my portfolio website in GatsbyJS + Contentful. I didn't find anything in regards to Contentful and excerpts, but I know a workaround that might be what you need.

The first thing you need to do is to install react-truncate into your project. Once you have that installed, wrap your documentToReactComponents like this:

import Truncate from 'react-truncate'

<Truncate
  lines={1}
  width={1000} // width being how much you want to truncate your copy
  ellipsis='&hellip;'
>
  { documentToReactComponents(edge.node.description.json) }
</Truncate>

This will truncate your text with a width of 1000px. You can change this value to your needs.

Hope this helps!