Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component render empties flicking-pagination-bullets #56

Open
kalkusa opened this issue Apr 19, 2024 · 1 comment
Open

Component render empties flicking-pagination-bullets #56

kalkusa opened this issue Apr 19, 2024 · 1 comment

Comments

@kalkusa
Copy link

kalkusa commented Apr 19, 2024

Description

Component render empties the bullets container. If no re-render appears, the plugin works well. But if state change causes component re-render then bullets disappear.

The situation happens in React.js.

Steps to check or reproduce

const flickingRef = useRef<Flicking | null>(null);
const plugins = [new Pagination({ type: "bullet" })];
const [isMoving, setIsMoving] = useState(false);

const handleMoveStart = () => {
    setIsMoving(true);
};

const handleMoveEnd = () => {
    setIsMoving(false);
};

<Flicking
            ref={flickingRef}
            circular={true}
            align="prev"
            onMove={handleMoveStart}
            onMoveEnd={handleMoveEnd}
            plugins={plugins}
          >
            <div className="recommendation-box">
                container1
            </div>
            <div className="recommendation-box">
                container2
            </div>
            <div className="recommendation-box">
                container3
            </div>
            <div className="recommendation-box">
                container4
            </div>
            <ViewportSlot>
              <div className="flicking-pagination"></div>
            </ViewportSlot>
          </Flicking>

When onMove and onMoveEnd handlers modify state, causing component rerender, then

<div class="flicking-pagination flicking-pagination-bullets">
<span class="flicking-pagination-bullet flicking-pagination-bullet-active"></span>
<span class="flicking-pagination-bullet"></span>
<span class="flicking-pagination-bullet"></span>
<span class="flicking-pagination-bullet"></span>
</div>

becomes

<div class="flicking-pagination flicking-pagination-bullets"></div>
@kalkusa
Copy link
Author

kalkusa commented Apr 19, 2024

I found a workaround for this issue:

  const plugins = useMemo(() => {
    return [new Pagination({ type: "bullet" })];
  }, []);

Maybe it's not even workaround, but proper usage - anyway documentation shows only functional component example - https://naver.github.io/egjs-flicking/Plugins#pagination . Meanwhile functional components are most popular now.

If this shouldn't be fixed it would be at least valuable to provide proper example...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant