Inherit autocomplete/suggestion proptypes in wrapper component

user_18144914 0
Viewed 149

I am creating my own custom "wrapper" around a chakraui component, so I can add my own props, methods and whatever I might need later on.

However, one downside of doing this is that I don't get suggestions for the imported chakraui-Button proptypes in Visual Studio Code, but only the new proptype "testPropColor". The other properties are still working, but is there any way of passing them further down so I can see them as suggestions as well?

What I have is this: custom-component/button.js

import { Button as ChakraButton } from '@chakra-ui/react'

export default function Button(properties) {
  const { testPropColor, children, ...props } = properties

  return (
    <ChakraButton color="testPropColor" {...props}>
      {children}
    </ChakraButton>
  )
}

And how I am using this in a view:

import Button from 'custom-component/Button'

export default function ViewComponent() {
  return (
    <Button
      bg="red"
      testPropColor="blue">Test</Button>
  )
}

chakra-ui next.js reactjs
1 Answers

Javascript doesn't come with type support. So no type-intellisense in VSCode.

I highly highly highly suggest adding TypeScript to your JS React project.

e.g:

interface ButtonProps extends ChakraButton { 
    // you need to get the `ChakraButton` properties type, from '@chakra-ui/react'. 
    // You should be able to import it.
    testPropColor: string;
    bg: string;

}
export function Button(properties: ButtonProps) {

}

Just a quick article I found for example here.

If for some reason you don't add TS(?!. you really should) -> then there's prop-types, but I don't suggest using it, compared to TS.

import PropTypes from 'prop-types';

Good luck

user_120568410
Related