Is forwardRef going to be implemented ?

[Slowl]

Currently using Next.js for a project, and I am trying to use the new Dynamic Import with the Slider (react-slick) component to create a separate chunk.

The problem is that I need to forward the ref to be able to use a custom Next & Prev button. React has a new API to allow that, forwardRef

Steps to replicate : 1 - First I need to Dynamically Import react-slick :

const DynamicSlider = dynamic(() => import('react-slick'))

2 - Then use the forwardRef api :

const ForwardedSlider = React.forwardRef((props, ref) => (  
  <Slider ref={ref} {...props}>
     {props.children}
  </Slider>
))

3 - And use ForwardedSlider :

<ForwardedSlider ref={this.myRef} {...settings}>
   <div> slider content </div>
</ForwardedSlider>

Even if my component is rendered, I can't access to the object 'myRef' and can't use my custom buttons

[ahmadi-akbar]

+1 same here

react: 17.0.2 next: 10.0.9 react-slick: 0.28.1

my snippet

import { forwardRef } from 'react';
import Slider from 'react-slick';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const MySlider = forwardRef((props, ref) => <Slider ref={ref} {...props} />);

export default MySlider;

export const Slider = dynamic(import('./Slider'), {
  ssr: false,
});

usage

<Slider ref={sliderRef} {...settings} className={cls.slider}>
...
</Slider>

result

CodeSandBox

https://codesandbox.io/s/react-slick-forwardref-bug-h44tu?file=/pages/index.js

[rfgonzalezweb]

:red_circle: I tried using forwardRef as inn the basic example and it is still not working on my end.

:heavy_check_mark: I was able to make it work by exposing the handle instead of the DOM node, link to the doc example below: :book: https://react.dev/reference/react/forwardRef#exposing-an-imperative-handle-instead-of-a-dom-node