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

[yongholeeme]

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/@[email protected]_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]

Hello @yongholeeme.

We fixed this issue in #886 and released @egjs/[email protected], which resolves this issue.

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