Add React example to documentation

[lightstrike]

Bibblio looks really interesting! Adding an integration example for React would be very helpful for me to evaluate this for my company.

[nicc]

Hi there,

firstly, my sincerest apologies for the late reply. We honestly just didn't see this issue somehow. We've made sure that won't happen again.

As for your question... we do run the related content module in a React stack for our admin dashboard. Here's a gist of how it works: https://gist.github.com/nicc/4939de77fa8e4f6cc2892d76b9d36af5
It assumes you've installed our related content module with Bower and included CSS and JS assets.
(I'm sure you know this but getInitialState, componentDidMount and render are all React lifecycle functions)

Let me know if you have any further questions!

All the best,
Nic

[claytoncollie]

Any extra movement on this issue? I am seeing React components in the readme but they are simply not working for me. I am building a site with NextJS and the component mentioed above and the ones in the readme are not pulling through any data.

It is because I am working on http://localhost:3000 and that is not a whitelisted domain?

Copy pasting the components from the exmaple above or the readme and it is printing to the DOM, but just not seeing any related items. And yes, there are plenty of related items in the content-items folder. When I view the content item browser, I see related items to a specific entry. And I am hard coding that entry to test that something will pull thru.

Any help using React and NextJS would be appreciated. Thank you!

[dushakov92]

@nicc's example is written in ES5 (May 2018).
this is what worked for me (Oct. 2021).

import {Bibblio} from 'bibblio-related-content-module'
import React, {useEffect, useState} from 'react'

export default function Recommendations({post}) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (mounted) {
    Bibblio.initRelatedContent({
      targetElementId: 'my-bibblio-container',
      recommendationKey: 'your recommendation key',
      customUniqueIdentifier: 'your custom unique identifier'
    })
  }

  return (
    <div>
      <h1>Related Content</h1>
      <div id="my-bibblio-container"></div>
    </div>
  )
}