How to Pass Padding/Margin as Props in React-Bootstrap Components?

In React-Bootstrap there are many components through which we can design our application. To style the application, we need to specify the padding and margin for these components. So, we can pass this custom padding and margin as props in these components. We can make our own custom components that wrap the react-bootstrap components and then receive the padding and margin values as props.

Prerequisites:

• React JS
• JSX
• React Bootstrap

Steps to Create React Application and Installing Bootstrap:

• Create a React application using the following command:

npx create-react-app props-component

• After creating your project folder(i.e. props-component), move to it by using the following command:

cd props-component

• Now install react-bootstrap in your working directory i.e. props-component by executing the below command in the VScode terminal:

npm install react-bootstrap bootstrap

• Now we need to Add Bootstrap CSS to the index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

Project Structure:

Example 1: In this example, we have imported the Button component from the react-bootstrap library. Then we have created the BtnPaddingMargin component which has the props of padding and margin and applies these styles to the main Button component. Here, we can dynamically change the values of padding and margin from the input boxes and then according to the values the button is been updated with the new padding and margin values.

Javascript

import React, { useState } from 'react';
import { Button } from 'react-bootstrap';

const App = () => {
    const [padding, setPadding] = useState('10px');
    const [margin, setMargin] = useState('5px');
    const paddingValFunction = (e) => {
        setPadding(e.target.value);
    };
    const marginValFunction = (e) => {
        setMargin(e.target.value);
    };
    const containerStyle = {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
    };
    const headerStyle = {
        color: 'green',
        marginTop: '20px',
    };
    const inputContainerStyle = {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        marginTop: '20px',
    };
    const inputStyle = {
        marginBottom: '10px',
    };
    return (
        <div style={containerStyle}>
            <h1 style={headerStyle}>GeeksforGeeks</h1>
            <h3 style={{ color: 'black' }}>
                Pass padding/margin as props in
                React-Bootstrap Button
            </h3>
            <BtnPaddingMargin
                padding={padding}
                margin={margin}
                onClick={() => alert('Button Clicked')}>
                Click Me
            </BtnPaddingMargin>
            <div style={inputContainerStyle}>
                <div style={inputStyle}>
                    <label>Padding:</label>
                    <input type="text"
                           value={padding}
                           onChange={paddingValFunction} />
                </div>
                <div style={inputStyle}>
                    <label>Margin:</label>
                    <input type="text" value={margin}
                           onChange={marginValFunction} />
                </div>
            </div>
        </div>
    );
};
const BtnPaddingMargin =
    ({ padding, margin, onClick, children }) => {
    const buttonStyle = {
        padding,
        margin,
        marginBottom: '20px',
    };
    return (
        <Button style={buttonStyle} onClick={onClick}>
            {children}
        </Button>
    );
};
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start 

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we have imported the Alert component from the react-bootstrap library. Same like Example 1, we have created the custom wrapper component as AlertProps which has the props of padding and margin. When user clikcs on the buttons of increase and decrese the values are been passed as props to the main Alert react-bootstrap component, and the margin and padding of the component is been updated on screen.

Javascript

import React, { useState } from 'react';
import { Alert } from 'react-bootstrap';
import './App.css';

const App = () => {
    const [padding, setPadding] = useState('10px');
    const [margin, setMargin] = useState('5px');
    const paddingChangeFunction = (e) => {
        setPadding(e.target.value);
    };
    const marginChangeFunction = (e) => {
        setMargin(e.target.value);
    };
    const paddingIncrease = () => {
        setPadding((prevPadding) => {
            const numericValue = parseInt(prevPadding) + 5;
            return `${numericValue}px`;
        });
    };
    const reducePadding = () => {
        setPadding((prevPadding) => {
            const numericValue = parseInt(prevPadding) - 5;
            return `${numericValue}px`;
        });
    };
    const marginIncrease = () => {
        setMargin((prevMargin) => {
            const numericValue = parseInt(prevMargin) + 5;
            return `${numericValue}px`;
        });
    };
    const reduceMargin = () => {
        setMargin((prevMargin) => {
            const numericValue = parseInt(prevMargin) - 5;
            return `${numericValue}px`;
        });
    };
    return (
        <div className="container">
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3>
                Pass padding/margin as props in
                React-Bootstrap Alert
            </h3>
            <AlertProps
                padding={padding}
                margin={margin}
                onClick={() => alert('Alert Clicked')}
            >
                GeeksforGeeks is Great
            </AlertProps>
            <div className="input-container">
                <div>
                    <label>Padding:</label>
                    <input type="text" value={padding}
                           onChange={paddingChangeFunction} />
                    <div className="button-container">
                        <span className="adjust-button"
                              onClick={paddingIncrease}>
                              +
                        </span>
                        <span className="adjust-button"
                              onClick={reducePadding}>
                              -
                        </span>
                    </div>
                </div>
                <div>
                    <label>Margin:</label>
                    <input type="text" value={margin}
                           onChange={marginChangeFunction} />
                    <div className="button-container">
                        <span className="adjust-button"
                              onClick={marginIncrease}>+</span>
                        <span className="adjust-button"
                              onClick={reduceMargin}>-</span>
                    </div>
                </div>
            </div>
        </div>
    );
};
const AlertProps =
    ({ padding, margin, onClick, children }) => {
    const alertStyle = {
        padding,
        margin,
        backgroundColor: 'lightyellow',
    };
    return (
        <Alert style={alertStyle}
               onClick={onClick} variant="warning">
            {children}
        </Alert>
    );
};
export default App;

CSS

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

h1 {
    color: green;
    margin-bottom: 10px;
}

h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.alert {
    padding: 10px;
    margin: 10px 0;
    background-color: lightyellow;
    border: 1px solid #f0ad4e;
    border-radius: 5px;
    width: 100%;
    max-width: 400px;
}

.input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

label {
    font-weight: bold;
    margin-bottom: 5px;
}

input[type="text"] {
    padding: 5px;
    margin-bottom: 10px;
    width: 100px;
    text-align: center;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.adjust-button {
    display: inline-block;
    background-color: #f0ad4e;
    color: white;
    padding: 2px 8px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 20%;
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .input-container {
        flex-direction: column;
    }

    .button-container {
        flex-direction: row;
    }
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start 

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: