naver/egjs-flicking

[@egjs/react-flicking] `firstPanelSize` prop also should be declared in `DEFAULT_PROPS`

yongholeeme opened this issue · 1 comments

yongholeeme commented

Description

The firstPanelSize prop is being passed to a DOM element, which causes a warning message in React. To resolve this, the firstPanelSize prop should be declared in DEFAULT_PROPS to prevent it from being passed to the DOM element.

The following warning message appears:

Warning: React does not recognize the `firstPanelSize` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `firstpanelsize` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at Flicking (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@egjs+react-flicking@4.11.3_patch_hash=udhpmtst4xgefa6rulabjuz4nu/node_modules/@egjs/react-flicking/dist/flicking.esm.js:492:24)

This warning occurs because the firstPanelSize prop is being passed to a DOM element, which React does not recognize. When an unknown prop is passed to a DOM element, React issues a warning.

To prevent the firstPanelSize prop from being passed to the DOM element, it should be declared in the component’s DEFAULT_PROPS. This will ensure that React does not forward the prop to the DOM element.

Relevant code:

  • egjs-flicking/packages/react-flicking/src/react-flicking/Flicking.tsx

    Lines 163 to 167 in 8e57219

    for (const name in props) {
    if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {
    attributes[name] = props[name];
    }
    }

  • egjs-flicking/packages/react-flicking/src/react-flicking/consts.ts

    Lines 27 to 52 in 8e57219

    export const DEFAULT_PROPS: FlickingProps = {
    viewportTag: "div",
    cameraTag: "div",
    cameraClass: "",
    renderOnSameKey: false,
    plugins: [],
    useFindDOMNode: false,
    hideBeforeInit: false,
    onReady: (e: ReadyEvent) => {},
    onBeforeResize: (e: BeforeResizeEvent) => {},
    onAfterResize: (e: AfterResizeEvent) => {},
    onHoldStart: (e: HoldStartEvent) => {},
    onHoldEnd: (e: HoldEndEvent) => {},
    onMoveStart: (e: MoveStartEvent) => {},
    onMove: (e: MoveEvent) => {},
    onMoveEnd: (e: MoveEndEvent) => {},
    onWillChange: (e: WillChangeEvent) => {},
    onChanged: (e: ChangedEvent) => {},
    onWillRestore: (e: WillRestoreEvent) => {},
    onRestored: (e: RestoredEvent) => {},
    onSelect: (e: SelectEvent) => {},
    onNeedPanel: (e: NeedPanelEvent) => {},
    onVisibleChange: (e: VisibleChangeEvent) => {},
    onReachEdge: (e: ReachEdgeEvent) => {},
    onPanelChange: (e: PanelChangeEvent) => {}
    };

Steps to check or reproduce

just pass firstPanelSize prop into <Flicking />

malangfox commented

Hello @yongholeeme.

We fixed this issue in #886 and released @egjs/react-flicking@4.12.0-beta.5, which resolves this issue.

We'll leave additional comment when this PR is merged and we release the patch.

  • 👍1