Flickity-extensions support (hash/fullscreen/etc)

[neolectron]

Hello, I'm having trouble getting flickity-hash to work,

based on the codesandbox link you provide, if I just add {hash: true} it prints : Type '{ hash: boolean; }' is not assignable to type 'FlickityOptions')

see: https://codesandbox.io/s/flickity-hash-support-2kljx?file=/pages/index.tsx

EDIT: found #38 , which sounds like the same "issue", Its about loading a flickity-addon. But in my case, since I'm using next (static), I keep getting ReferenceError: window is not defined

Do you know any workaround for this ?

Thanks

[yaodingyd]

You can use dynamic import.

Next.js provide their own API:

import dynamic from 'next/dynamic'

const hash = dynamic(
  () => import('flickity-hash'),
  { ssr: false }
)

function Carousel() {
  return (
    <>
    {hash &&
        <Flickity options={{ hash: true }}>
          <img id="cat1" alt="" src="https://placeimg.com/640/480/animals" />
          <img id="cat2" alt="" src="https://placeimg.com/640/480/animals" />
        </Flickity>
    }
    </>
  );
}

Or you can do the in native javascript way

const hash = typeof window !== 'undefined' ? import('flickity-hash') : () => null;

function Carousel() {
  return (
    <>
    {hash &&
        <Flickity options={{ hash: true }}>
          <img id="cat1" alt="" src="https://placeimg.com/640/480/animals" />
          <img id="cat2" alt="" src="https://placeimg.com/640/480/animals" />
        </Flickity>
    }
    </>
  );
}

[neolectron]

Thank you for your time,

unfortunately that is what I am doing, and it doesn't seem to work, it silently does "nothing".

I have a codesandbox forked from your demo with the second method in it to show the behavior :

https://codesandbox.io/s/react-flickity-fullscreen-p1lut

Am I missing something ?

I also did it with flickity-hash, and poped-out the window to see if it has an impact , nothing changes.

I'm running out of ideas.

[yaodingyd]

https://codesandbox.io/s/react-flickity-fullscreen-forked-bpog8?file=/src/index.js

1. You need to import fullscreen's css
2. You need to specify fullscreen: true, just like in flickity's document

[neolectron]

My bad I shared the wrong Codesanbox link, but yours is still kind of weird, there's strange stuff happening.

Actual behavior :

• Upon first landing on the page, the flickity-fullscreen icon is not there.
• (I think the flickity-fullscreen plugin isn't loaded at all at this point)
• It only appears after clicking "Open in new window" in the top-right corner.
• (Or playing mad with refresh / hot-reload / and theses kind of stuff)

Expected behavior :

• should work when coming directly to the specified page
• (it will happen on static websites)

I provided another codesandbox link (in fact, it's the original one I failed to sent you), with exactly the same code, and it doesn't work :

https://codesandbox.io/s/issue-pinpoint-flickity-plugins-oyql4?file=/pages/subdir/index.js

My guess is it has to do with the load-order of plugins and flickity. I can't see any other reason why it would work only with those tricks beside the fact that flickity is loaded after the plugin when we use hot-reload, or the "open in new window" trick.

I think if we could find what behavior is different between these sandboxes, we will find the issue.

As always, thank you for your time.

[yaodingyd]

I suspect this is because how codesandbox works. I copied the project locally and it always works. Can u try that?