imagine10255/bear-react-carousel

Documentation site down

Closed this issue · 7 comments

hutber commented

Having looked through the files to check out this carousel I can say I will certainly be using this :)

Just thought I would flag the sites being down.

Also it'd be great to have some form of lightbox incorporated into it.

imagine10255 commented

@hutber hi, thanks for your feedback, the documentation site has been restored
carousel.bearests.com/

  • ❤️1
hutber commented

Amazing thank you pal! Much better with this now!

I am having some issues with SSR and nextJs.
image
image

I will try to get a reproducible test!

imagine10255 commented

@hutber Hi, since I don't use the SSR project, this kit does not support rendering directly in the SSR stage (exceptions are also related to manipulating the dom), if you are using NEXT.js, you can use the CSR-only rendering option

https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

const BearCarousel  = dynamic(() => import("bear-react-carousel").then((mod) => mod), {
   ssr: false,
 });
  • 👍1
hutber commented

Brilliant and thank you for the info :)!!

  • ❤️1
hutber commented

Seems I cannot get this to work, with default exports and named exports not playing nicely. If I do get a solution, I will post it here for everybody :)

hutber commented

Ahh you're too kind! I actually missed this, but this would have helped me for sure!

For me, the main issue was around using the named import { BearSlideItem } as you can only do a dynamic import via the default export.

So the solution was:

import React from 'react'
import BearCarousel, { BearSlideItem } from 'bear-react-carousel'

const Gallery = ({ images }) => {
  if (images.length === 1) {
    return (
      <Img>
        <img src={`XXX`} />
      </Img>
    )
  } else {
    const bearSlideItemData = images.map(i => {
      return {
        key: i.key,
        children: <BearSlideItem imageUrl={i.imageUrl} />,
      }
    })
    return <BearCarousel data={bearSlideItemData} aspectRatio={{ widthRatio: 16, heightRatio: 9 }} />
  }
}

export default Gallery

Then using it across the site was:

const Gallery = dynamic(() => import('components/Gallery'), { ssr: false })