Framer Motion like tag-extending API

[raimondlume]

It quickly got repetitive wrapping all text-based tags with Balancer, so I created this quick helper utility for myself, inspired by Framer Motions motion component.

Screen.Recording.2023-01-12.at.16.37.36.mov

import Balancer from 'react-wrap-balancer';
import type { HTMLAttributes, FC } from 'react';

interface Props extends HTMLAttributes<HTMLParagraphElement> {
  children: React.ReactNode;
}

const BalancedParagraph: FC<Props> = ({ children, ...rest }) => {
  return (
    <Balancer>
      <p {...rest}>{children}</p>
    </Balancer>
  );
};

const balanced = {
  p: BalancedParagraph,
};

export default balanced;

What do you think, could this interface be implemented (with all text-based tags) into the framework itself?

[shuding]

Although I don't recommend adding this to all paragraphs (because it makes the width of each paragraph different, so an article with multiple paragraphs will not look good), but maybe h1~h6 makes sense? Another thing is <Balancer> needs to be put inside the wrapper:

<p {...rest}>
  <Balancer>{children}</Balancer>
</p>

Maybe it's an overkill? I'm not sure. Can probably be built-into another design system?