Divider Component
A React component for displaying horizontal dividers with optional text.
Installation
Use the package manager npm or yarn to install the component.
npm install @bolttech/frontend-foundations @bolttech/atoms-divider
or
yarn add @bolttech/frontend-foundations @bolttech/atoms-divider
Props
The Divider component accepts the following properties:
| Prop | Type | Description |
|---|---|---|
| dataTestId | string | The data-testid attribute for testing. |
| text | string | The text to be displayed in the divider. |
| withoutPadding | boolean | If true, the divider won't have padding. |
Usage
import React from 'react';
import {Divider} from '@bolttech/atoms-divider';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";
const ExampleComponent = () => {
return (
<BolttechThemeProvider theme={bolttechTheme}>
<Divider
dataTestId="custom-divider"
text="Custom Divider"
withoutPadding={false}
/>
</BolttechThemeProvider>
);
};
export default ExampleComponent;
Contributing
Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.
Please make sure to follow the code standards and test your changes before submitting.