What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Question

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, but rather be accessible only within the styled component.

While converting props to transient props is a solution, it leads to repetitive code which unnecessarily increases the size of the component. Is there a way to pass certain props to the styled component without having them propagate to the DOM, and without having to redefine each prop individually? I experimented with using shouldForwardProps, but unfortunately, I encountered difficulties integrating it with TypeScript.

type Props = {
  children: React.ReactNode;
  size: number;
  height: number;
  color: string;
};

const StyledText = styled.p<{ $color: string; $size: number; $height: number }>`
  color: ${({ $color }) => $color};
  font-size: ${({ $size }) => `${$size}px;`};
  line-height: ${({ $height }) => `${$height}px;`};
  ...
`;

const Text: React.FC<Props & React.HTMLAttributes<HTMLParagraphElement>> = ({ children, size, height, color, ...rest }) => {
  return (
    <StyledText $size={size} $height={height} $color={color} {...rest}>
      {children}
    </StyledText>
  );
};

javascript css reactjs typescript styled-components

Answer 1

Answer №1

Implementing the solution with shouldForwardProps as previously suggested addresses your specific need. While attempting to integrate customAttributeNames with the Props, I encountered challenges and decided to abandon that approach.

const customAttributeNames = ["size", "height", "color"] as const;

type TCustomAttribute = typeof customAttributeNames[number];

type Props = React.HTMLAttributes<HTMLParagraphElement> & {
  children: React.ReactNode;
  size: number;
  height: number;
  color: string;
};

const StyledTextWithoutDomAttributes = styled.p.withConfig({
  shouldForwardProp: (prop) =>
    !(customAttributeNames as readonly string[]).includes(prop)
})<Pick<Props, TCustomAttribute>>`
  color: ${({ color }) => color};
  font-size: ${({ size }) => `${size}px;`};
  line-height: ${({ height }) => `${height}px;`};
`;

const StyledTextWithDomAttributes = styled.p<Pick<Props, TCustomAttribute>>`
  color: ${({ color }) => color};
  font-size: ${({ size }) => `${size}px;`};
  line-height: ${({ height }) => `${height}px;`};
`;

const Text: React.FC<Props> = ({ children, size, height, color, ...rest }) => {
  return (
    <>
      <StyledTextWithDomAttributes
        size={size}
        height={height}
        color={color}
        {...rest}
      >
        {children}
      </StyledTextWithDomAttributes>
      <StyledTextWithoutDomAttributes
        size={size}
        height={height}
        color={color}
        {...rest}
      >
        {children}
      </StyledTextWithoutDomAttributes>
    </>
  );
};

To observe this setup in action, visit this sandbox link.

Answer 2

Implementing the solution with shouldForwardProps as previously suggested addresses your specific need. While attempting to integrate customAttributeNames with the Props, I encountered challenges and decided to abandon that approach.

const customAttributeNames = ["size", "height", "color"] as const;

type TCustomAttribute = typeof customAttributeNames[number];

type Props = React.HTMLAttributes<HTMLParagraphElement> & {
  children: React.ReactNode;
  size: number;
  height: number;
  color: string;
};

const StyledTextWithoutDomAttributes = styled.p.withConfig({
  shouldForwardProp: (prop) =>
    !(customAttributeNames as readonly string[]).includes(prop)
})<Pick<Props, TCustomAttribute>>`
  color: ${({ color }) => color};
  font-size: ${({ size }) => `${size}px;`};
  line-height: ${({ height }) => `${height}px;`};
`;

const StyledTextWithDomAttributes = styled.p<Pick<Props, TCustomAttribute>>`
  color: ${({ color }) => color};
  font-size: ${({ size }) => `${size}px;`};
  line-height: ${({ height }) => `${height}px;`};
`;

const Text: React.FC<Props> = ({ children, size, height, color, ...rest }) => {
  return (
    <>
      <StyledTextWithDomAttributes
        size={size}
        height={height}
        color={color}
        {...rest}
      >
        {children}
      </StyledTextWithDomAttributes>
      <StyledTextWithoutDomAttributes
        size={size}
        height={height}
        color={color}
        {...rest}
      >
        {children}
      </StyledTextWithoutDomAttributes>
    </>
  );
};

To observe this setup in action, visit this sandbox link.

Answer 3

Answer №2

One way to enhance your design system is by starting with a default StyledText component and then customizing it using the styled function.

const StyledTextPrimary = styled.p`
  color: #000;
  font-size: 1rem;
  line-height: 130%;
`;

You can further customize it like this:

const StyledTextLarge = styled(StyledText)`
  color: #333333;
  font-size: 1.2rem;
  line-height: 140%;
`;

In a well-structured design system, it is advisable to define various text/typography variants such as headings or subheadings. This approach enables you to create distinct components instead of relying on variable inputs that may not align with the intended design.

If managing multiple text components becomes overwhelming, consider creating a single component that accepts a "variant" attribute and dynamically selects the appropriate component based on predefined options.

Here's an example implemented in TypeScript:

export enum ETextVariants {
  primary,
  large,
}

const variants = {
  [ETextVariants.primary]: StyledTextPrimary,
  [ETextVariants.large]: StyledTextLarge,
};

export interface ITextProps extends ComponentPropsWithoutRef<'p'> {
  variant?: ETextVariants;
}
export function StyledText({
  variant = ETextVariants.primary,
  children,
  ...props
}: ITextProps) {
  const TextComponent = variants[variant];
  return (
    <TextComponent {...props}>
      {children}
    </TextComponent>
  );
}

To use this setup, simply include the following:

  <StyledText>my text</StyledText>
  // or
  <StyledText variant={ETextVariants.large}>my text</StyledText>

While strings can be used instead of enums for defining variants, utilizing enums is a common development practice to optimize build space and memory usage.

For a live demo, check out this CodeSandbox: https://codesandbox.io/s/variants-on-a-styled-components-1pcjii

Answer 4

One way to enhance your design system is by starting with a default StyledText component and then customizing it using the styled function.

const StyledTextPrimary = styled.p`
  color: #000;
  font-size: 1rem;
  line-height: 130%;
`;

You can further customize it like this:

const StyledTextLarge = styled(StyledText)`
  color: #333333;
  font-size: 1.2rem;
  line-height: 140%;
`;

In a well-structured design system, it is advisable to define various text/typography variants such as headings or subheadings. This approach enables you to create distinct components instead of relying on variable inputs that may not align with the intended design.

If managing multiple text components becomes overwhelming, consider creating a single component that accepts a "variant" attribute and dynamically selects the appropriate component based on predefined options.

Here's an example implemented in TypeScript:

export enum ETextVariants {
  primary,
  large,
}

const variants = {
  [ETextVariants.primary]: StyledTextPrimary,
  [ETextVariants.large]: StyledTextLarge,
};

export interface ITextProps extends ComponentPropsWithoutRef<'p'> {
  variant?: ETextVariants;
}
export function StyledText({
  variant = ETextVariants.primary,
  children,
  ...props
}: ITextProps) {
  const TextComponent = variants[variant];
  return (
    <TextComponent {...props}>
      {children}
    </TextComponent>
  );
}

To use this setup, simply include the following:

  <StyledText>my text</StyledText>
  // or
  <StyledText variant={ETextVariants.large}>my text</StyledText>

While strings can be used instead of enums for defining variants, utilizing enums is a common development practice to optimize build space and memory usage.

For a live demo, check out this CodeSandbox: https://codesandbox.io/s/variants-on-a-styled-components-1pcjii

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Answer №1

Answer №2

Similar questions

Executing PHP function through AJAX

What could be the reason my component is not displaying the ContentChild associated with a directive?

What is the best way to have a div gradually glide out (utilizing CSS's transition feature) upon the click of a particular button?

Angularjs application and bash script generating different SHA256 hashes for the same file

Convert a JSON array with a single element into a valid JavaScript object

Adding pixels to the top position with jQuery in Angular 2

Enhancing class functionality with decorators in TypeScript

Changing JavaScript functions into jQuery functions

Receiving multiple Firebase notifications on the web when the same application is open in multiple tabs

Converting Firebase TIMESTAMP values to human-readable date and time

Customizing Echart tooltip appearance

Sending an identifier to a PHP file using JavaScript

Why does xpath insist on choosing spaces instead of actual elements?

Formik's setFieldValue function exhibits a delay in updating the state, resulting in a one-render lag

How Axios triggers CanceledError using Abort controller in a React application

Make sure to load the Mantine styles only after the Tailwind preflight styles

Creating an alarm clock with customizable time and date formats using ReactJS with Material-UI integration

Is there a sophisticated method for breaking down a nested property or member from TypeScript imports?

node js retrieves information from the request body

The backend is serving HTML content, but the frontend is not initiating any redirects