How do I properly extend React Bootstrap components?

Question

Say I have a badge component I want to add sizing for. This is how I currently do it:

import React from 'react';
import Badge from 'react-bootstrap/Badge';
import classNames from 'classnames';

const BadgeExtended = props => {
  const {className, size, ...attr} = props;
  const classes = classNames(
    className,
    size && `badge-${size}`
  );

  return <Badge className={classes} {...attr}>{props.children}</Badge>;
};

export default BadgeExtended;

which works OK. Is that a correct way to do it? Is there a way to extend the original component so that I dind't have to import an extended one, using react-bootstrap/Badge instead?

i am learning reactjs from couple of week . Even after writting some scratch codes andd few small projects i feel this code is so different from way i write ... — Pravin Poudel
– Pravin Poudel, Commented Aug 9, 2019 at 16:06

Mickey · Accepted Answer · 2019-08-09 16:02:34Z

2

I think the way you came up with is the right way. If you look at the repository (here), the Badge component is functional, not a class, so there's no way to use the extend keyword.

Making an HOC seems like the best way to achieve what you're doing.

answered Aug 9, 2019 at 16:02

Mickey

5803 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I properly extend React Bootstrap components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related