Pass props to a `react-bootstrap` component, with the correct types, in TypeScript

Active3 hr before
Viewed126 times

9 Answers


I'm using the react-bootstrap package, in React, and written in TypeScript.,I have a component that wraps the Button component from react-bootstrap, and I want to accept all props that Button accepts (and therefore, that the underlying HTML button element also accepts, like style), to this new component, so that I can pass them down to Button., Why did the Buddha contradict about His teachings in these two different suttas?

 Pretag team - issue, fix, solve, resolve

The type definitions for Button in react-bootstrap is:,I love the Card component and I use it in many ways. I often build components wrapped in a Card, and I should love to extend this components props to the Card component props so I juste have to pass the props.,It should be great if each component export his props interface (or type) which can be passed directly to the component. Actually ButtonProps and CardProps don't do the trick.

import { Button } from 'react-bootstrap';

function WrapperButton(props) {
  const { children } = props;

  return <Button {...props}>{children}</Button>;
load more v

 Pretag team - issue, fix, solve, resolve

Let’s break this down from the top. ,First, we declare our component props and state interfaces, so TypeScript knows what type of props this component should receive and what type of state it keeps track of.,Inside our React component, you will notice a special static defaultProps property that allows us to tell TypeScript what props are not required and have a default set. You can read more in TypeScript’s documentation about setting default props for React.

1import * as React from 'react';
3interface ToggleProps {
4    ClickHandler: (event: React.MouseEvent<HTMLButtonElement>) => void
7export function Toggle(Props: ToggleProps) {
8    return <button onClick={Props.ClickHandler}>Toggle</button>
load more v

You can pass the Overlay injected props directly to the Tooltip component.,Tooltip expects specific props injected by the <Overlay> component,This is generally provided by the Overlay component positioning the tooltip

function Example() {  const [show, setShow] = useState(false);  const target = useRef(null);
  return (    <>      <Button variant="danger" ref={target} onClick={() => setShow(!show)}>        Click me to see      </Button>      <Overlay target={target.current} show={show} placement="right">        {({ placement, arrowProps, show: _show, popper, ...props }) => (          <div            {...props}            style={{              backgroundColor: 'rgba(255, 100, 100, 0.85)',              padding: '2px 10px',              color: 'white',              borderRadius: 3,    ,            }}          >            Simple tooltip          </div>        )}      </Overlay>    </>  );}
render(<Example />);
load more v

React Props are like function arguments in JavaScript and attributes in HTML.,Props are passed to components via HTML attributes.,To send props into a component, use the same syntax as HTML attributes:

Add a "brand" attribute to the Car element:

const myelement =
<Car brand="Ford" />;
load more v

Have a look at the Create React App with TypeScript example.,The problem is that the type of the flexDirection property is inferred as string, which is too arbitrary. To fix this, you can pass the styles object directly to withStyles:,withStyles allows a styles object with top level media-queries like so:

In order for types to work, you have to at least have the following options enabled in your tsconfig.json:

   "compilerOptions": {
      "lib": ["es6", "dom"],
      "noImplicitAny": true,
      "noImplicitThis": true,
      "strictNullChecks": true
load more v

How To Create React Elements with JSX ,The name property is a string, but props can be any data type that you could pass to a JavaScript function. To see this at work, add the rest of the data., How To Create Wrapper Components in React with Props

 Pretag team - issue, fix, solve, resolve

For example, this code written with JSX:,Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.,Uncontrolled Components

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;

  <Hello toWhat="World" />,
load more v

Other "props-react" queries related to "Pass props to a `react-bootstrap` component, with the correct types, in TypeScript"