how to customize the shape height and width of a component from the props using react-CodePudding

I am using React & Typescript and trying to create a square shape component, that based on a custom props passed to the component I can modify the height and width to anything else, i am referring to be able to customize the height and width.

GOAL: at the moment it is a square based on the scss, how can someone, just by chaging the props customHeight and customWidth change that to become a rectangle shape


# shomeShape.tsx

interface Props {
  customHeight?: string;
  customWidth?: string;
}

const SomeShape: React.FC<Props> = (props: Props): JSX.Element => {
  const { customHeight, customWidth } = props;

  return (
    <div className={styles.customContainer}> 
       Random Text
    </div>
  );
};

export default SomeShape;

# scss
.customContainer {
  width: 100px;
  height: 100px;
}

Any help would be much appreciated

CodePudding user response：

You can change the shape of the component by using the style prop on the div.

interface Props {
  customHeight?: string;
  customWidth?: string;
}

const SomeShape: React.FC<Props> = (props: Props): JSX.Element => {
  const { customHeight, customWidth } = props;

  return (
    <div style={{
      height: customHeight || 100,
      width: customWidth || 100,
}}> 
       Random Text
    </div>
  );
};

export default SomeShape;

Note that numbers provided in the style prop will be converted to pixel values.

If you want your app to use classes instead of inline styles (it's better for performance), look into a CSS-in-JS library such as emotion or styled-components.

CodePudding user response：

CSS preprocessors are great, but for React you may give it a try to styled-components, is an awesome tool you will appreciate a lot once you start using it

import styled from 'styled-components'
import React from 'react'

const StyledContainer = styled(({ customWidth, customHeight, children, ...props }) => 
<div {...props}>{children}</div>)`
  width: ${({ customWidth }) => customWidth}px;
  height: ${({ customHeight }) => customHeight}px;
`

interface Props {
  customWidth: string
  customHeight: string
}

const SomeShape: React.FC<Props> = ({ customWidth, customHeight }): JSX.Element => {
  return (
    <StyledContainer customWidth={customWidth} customHeight={customHeight}>
      Random Text
    </StyledContainer>
  )
}

export default SomeShape

Here this snippet is assuming that the props customWidth and customHeight only have the number of pixels and not the unit (customWidth = '750') you either can pass the string as a value with his unit (customWidth = '75vw'), in this last case just remove the px units in the end of the callback inside the width and height props of the StyledContainer

This way you avoid using inline styles which is less performant as said in the previous answer.

Styled-components may look strange at first look, but is a great tool for writing css in React apps.

CodePudding user response：

Here is javascript version. Here is CodeSandbox for this code.

import styled from "styled-components";
import "./styles.css";

const StyledContainer = styled.div`
  width: ${({ customWidth }) => (customWidth ? customWidth : "300px")};
  height: ${({ customHeight }) => (customHeight ? customHeight : "500px")};
  background-color: aqua;
`;

export default function App() {
  return (
    <div className="App">
      <StyledContainer customWidth={"300px"} customHeight={"70vh"}>
        Random Text
      </StyledContainer>
    </div>
  );
}

It depends on you if you want to pass units in props or not.