A lightweight and simple React Native component that tracks your progress by steps.
npm install @joaosousa/react-native-progress-stepsA lightweight and simple React Native component that tracks your progress by steps.
- Installation
- Usage
- Properties
- ProgressSteps
- Steps array model
- Colors customization model
- Demos
- Contributing
- License
Using yarn:
``sh`
yarn add @joaosousa/react-native-progress-steps
Using npm:
`sh`
npm install @joaosousa/react-native-progress-steps
You can use it as is, using default components:
`js
import ProgressSteps, { Title, Content } from '@joaosousa/react-native-progress-steps';
const [step, setStep] = useState(0);
steps={[
{
id: / Your id /,
title:
`
If you want to customize, you can use the property colors following the structure on the example below:
`js
import ProgressSteps, { Title, Content } from '@joaosousa/react-native-progress-steps';
const [step, setStep] = useState(0);
steps={[
{
id: / Your id /,
title:
Or, alternatively, with your own custom components:
`js
import ProgressSteps from '@joaosousa/react-native-progress-steps';
import YourMarker from './YourMarker';
import YourTitle from './YourTitle';
import YourContent from './YourContent';const [step, setStep] = useState(0);
marker={ }
currentStep={step}
steps={[
{
id: /Your id/,
title: {/Your title/} ,
content: {/ Your content /} ,
},
{
id: /Your id/,
title: {/Your title/} ,
content: {/ Your content /} ,
},
]}
/>;
`To help you make visual changes, the property
stepState will be automatically injected in your custom components with the following data:`js
{
stepIndex: number;
isActive: boolean;
isCompleted: boolean;
isFirst: boolean;
isFirstInteraction: boolean;
isLast: boolean;
}
`Here is an example of
stepState usage in a custom component:`js
import { Text } from 'react-native';const CustomTitle = ({ children, stepState: { isCompleted } }) => {
if (isCompleted) {
return Well done! This step was completed. ;
}
return {children} ;
};
export default CustomTitle;
`Properties
$3
| Name | Description | Default | Type | Optional |
| ----------- | ---------------------------------------------- | ---------- | ------------------------------------- | -------- |
| currentStep | The index of the currently active step | none | Number | No |
| steps | List of steps | none | Array | No |
| orientation | Support for vertical or horizontal orientation | 'vertical' | String | Yes |
| marker | Custom step identifier | Marker | ReactElement | Yes |
| colors | Property that let you add customization | none | Object | Yes |
#### Steps array model
`js
[
{
id?: string | number,
title: ReactElement,
content?: ReactElement,
},
...
]
`#### Colors customization model
`js
{
title?: {
text: {
normal: string,
active: string,
completed: string
}
},
marker?: {
text: {
normal: string,
active: string,
completed: string
},
line: {
normal: string,
active: string,
completed: string
}
}
}``| Example 1 | Example 2 | Example 3 |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| !example 1 | !example 2 | !example 3 |
| example/src/examples/Example1 | example/src/examples/Example2 | example/src/examples/Example3 |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT