CODEWITHSUNDEEP
reactjsflowtype
riscos3
riscos3

Reputation: 1825

In react how can I use flow to type check only certain props, but ignore ANY others?

I'm creating some button components and I have some custom props that I need and want them checked by flow. But as they are buttons I would also like any other props from the HTML button elements but don't want to type check them all.

Is there any way in react or maybe with an npm package to let me type check my new custom props and let the component receive any other ones? Or maybe just restricted to the HTML defined ones?

Upvotes: 1

Views: 730

Answers (1)

Saad
Saad

Reputation: 53939

You should just be able to pass the rest of the props down without putting type annotations for it.

Example:

import React, { type Node } from 'react'

type Props = {
  primary?: boolean,
  children: Node
}

function Button({ primary, children, ...props }: Props) {
  return (
    <button 
      className={primary ? 'is-primary' : ''}
      {...props}
    >
      {children}
    </button>
  )
}

export default Button

Usage:

function App() {
  return (
    <div>
      <Button primary onClick={() => console.log('clicked!')}>
        Click Me
      </Button>  
    </div>
  )
}

You can also check it out on flow.org/try.

Upvotes: 1

Related Questions