Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joaosousa88/react-native-progress-steps
A lightweight and simple React Native component that tracks your progress by steps.
https://github.com/joaosousa88/react-native-progress-steps
customizable lightweight progress react-native steps
Last synced: 6 days ago
JSON representation
A lightweight and simple React Native component that tracks your progress by steps.
- Host: GitHub
- URL: https://github.com/joaosousa88/react-native-progress-steps
- Owner: joaosousa88
- License: mit
- Created: 2021-10-11T14:30:21.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-17T12:33:28.000Z (over 2 years ago)
- Last Synced: 2024-09-19T14:41:57.322Z (14 days ago)
- Topics: customizable, lightweight, progress, react-native, steps
- Language: TypeScript
- Homepage:
- Size: 1.35 MB
- Stars: 14
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @joaosousa/react-native-progress-steps
A lightweight and simple React Native component that tracks your progress by steps.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Properties](#properties)
- [ProgressSteps](#progresssteps)
- [Steps array model](#steps-array-model)
- [Colors customization model](#colors-customization-model)
- [Demos](#demos)
- [Contributing](#contributing)
- [License](#license)
## Installation
Using yarn:
```sh
yarn add @joaosousa/react-native-progress-steps
```
Using npm:
```sh
npm install @joaosousa/react-native-progress-steps
```
## Usage
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);
{/* Your title */},
content: {/* Your content */},
},
{
id: /* Your id */,
title: {/* Your title */},
content: {/* Your content */},
},
]}
/>;
```
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);
{/* Your title */},
content: {/* Your content */},
},
{
id: /* Your id */,
title: {/* Your title */},
content: {/* Your content */},
},
]}
colors={{
title: {
text: {
normal: '#94d2bd',
active: '#005f73',
completed: '#005f73',
},
},
marker: {
text: {
normal: '#94d2bd',
active: '#005f73',
completed: '#f4f3ee',
},
line: {
normal: '#94d2bd',
active: '#005f73',
completed: '#005f73',
},
},
}}
/>
```
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);
}
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
### ProgressSteps
| Name | Description | Default | Type | Optional |
| ----------- | ---------------------------------------------- | ---------- | ------------------------------------- | -------- |
| currentStep | The index of the currently active step | none | Number | No |
| steps | List of steps | none | [Array](#steps-array-model) | 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](#colors-customization-model) | 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
}
}
}
```
## Demos
| Example 1 | Example 2 | Example 3 |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
|  |  |  |
| [example/src/examples/Example1](example/src/examples/Example1) | [example/src/examples/Example2](example/src/examples/Example2) | [example/src/examples/Example3](example/src/examples/Example3) |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT