Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@bolttech/atoms-stepper
Advanced tools
The **Stepper** component is a React component designed to provide a customizable step-by-step navigation experience. This component allows users to visualize and navigate through a sequence of steps, each represented by a title and optional content.
Readme
The Stepper component is a React component designed to provide a customizable step-by-step navigation experience. This component allows users to visualize and navigate through a sequence of steps, each represented by a title and optional content.
To use the Stepper component in your React application, follow these steps:
npm install @bolttech/frontend-foundations @bolttech/atoms-stepper
or
yarn add @bolttech/frontend-foundations @bolttech/atoms-stepper
Once you have the required dependencies installed, you can start using the Stepper
component in your React application.
The Stepper component provides a visual representation of a step-by-step process. It supports customization through various props.
To use the component, import it and include it in your JSX:
import React from 'react';
import {Stepper} from '@bolttech/atoms-stepper';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";
function App() {
const stepperArray = [
{
title: 'Step 1',
statusIndicator: 'completed',
componentContent: <p>Step 1 content</p>,
},
{
title: 'Step 2',
statusIndicator: 'default',
componentContent: <p>Step 2 content</p>,
},
{
title: 'Step 3',
statusIndicator: 'error',
componentContent: <p>Step 3 content</p>,
},
];
return (
<BolttechThemeProvider theme={bolttechTheme}>
<Stepper stepperArray={stepperArray} dataTestId="my-stepper"/>
</BolttechThemeProvider>
);
}
export default App;
The Stepper component accepts the following props:
Prop | Type | Description |
---|---|---|
stepperArray | StepperItem[] | An array of step objects to be displayed. |
dataTestId | string | The data-testid attribute for testing purposes. |
Each StepperItem
object should have the following structure:
{
title: 'Step Title',
statusIndicator: 'completed' | 'default' | 'error',
componentContent: JSX.Element,
}
Here's an example of using the Stepper component:
<Stepper
stepperArray={[
{
title: 'Step 1',
statusIndicator: 'completed',
componentContent: <p>Step 1 content</p>,
},
{
title: 'Step 2',
statusIndicator: 'default',
componentContent: <p>Step 2 content</p>,
},
{
title: 'Step 3',
statusIndicator: 'error',
componentContent: <p>Step 3 content</p>,
},
]}
dataTestId="my-stepper"
/>
This will render a Stepper component with three steps, each with a different status indicator and content.
Contributions to the Stepper component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.
FAQs
The **Stepper** component is a React component designed to provide a customizable step-by-step navigation experience. This component allows users to visualize and navigate through a sequence of steps, each represented by a title and optional content.
The npm package @bolttech/atoms-stepper receives a total of 8 weekly downloads. As such, @bolttech/atoms-stepper popularity was classified as not popular.
We found that @bolttech/atoms-stepper demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.