skip to Main Content

I am trying to get intellisense in VSCode working for functional components that use forwardRef.

Assume a functional component like this:

const Slider = forwardRef(({value = 0, onChange = () => { /* some function */ }}, ref) => {
  return "whatever"
})
export default Slider;

If use this component somewhere else, the props value and onChange are not suggested by intellisense. I am not using typescript, so is there any workaround to get intellisense work in this case without adding much overhead?

I just found suggestions for typescript implementations, but not for this approach.

2

Answers


  1. The only thing you can do in this situation is to use JSDoc comments in order to help VSCode to be able to make suggestions. Something like this

    /**
     * @typedef {Object} SliderProps
     * @property {number} [value] - The current value of the slider.
     * @property {function(number):void} [onChange] - Callback function triggered when the value changes.
     */
    
    /**
     * Slider component
     * @param {SliderProps} props
     * @param {React.Ref} ref - Forwarded ref for the slider element.
     * @returns {React.ReactElement} The Slider component.
     */
    const Slider = forwardRef(...)
    
    Login or Signup to reply.
  2. You can use JSDoc comment:

    /**
     * @param {object} props
     * @param {number} [props.value=0] - The slider value
     * @ param {function} [props.onChange] - The change handler function 
     */
    const Slider = f…
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search