React-native-pulse-loader-kit NPM

react-native-pulse-loader-kit

A customizable and reusable pulse loader component for React Native - Expo.

Installation

You can install the package via npm:

npm install react-native-pulse-loader-kit

Or via yarn:

yarn add react-native-pulse-loader-kit

Usage

Here's a basic example of how to use the PulseLoaderKit component in your React Native application:

import React from "react";
import { View } from "react-native";
import { PulseLoaderKit } from "react-native-pulse-loader-kit";

const App = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <PulseLoaderKit isLoaderInAction={true} />
  </View>
);

export default App;

Props

The PulseLoaderKit component accepts the following props:

Prop	Type	Default	Description
`dotColor`	`string`	`#3D9C91`	The color of the dots.
`dotCount`	`number`	`3`	The number of dots to be displayed.
`dotSize`	`number`	`20`	The size of the dots in pixels.
`interval`	`number`	`300`	The interval between the dots in milliseconds.
`isLoaderInAction`	`boolean`	`false`	The state of the loader.
`message`	`string`	`undefined`	The message to be displayed below the loader.
`messageColor`	`string`	`#DD7C2E`	The color of the message.
`pulseStages`	`number[]`	`[4, 6, 8, 10, 12]`	The sizes of the pulse in pixels when `singlePulse` is true.
`singlePulse`	`boolean`	`false`	If true, the loader will be a single pulse.
`isGradient`	`boolean`	`false`	If true, the loader will be a gradient.
`gradientColors`	`[string, string, ...string[]]`	`["#3D9C91", "#DD7C2E", "#3D9C2E"]`	The colors of the gradient.

Example

Here's a more detailed example demonstrating various props:

Single Pulse Example

<PulseLoaderKit
  isLoaderInAction={true}
  singlePulse={true}
  pulseStages={[4, 6, 8, 10, 12]}
  dotColor="#FF0000"
  message="Loading single pulse..."
  messageColor="#000"
  isGradient={true}
  gradientColors={["#1E3A8A", "#3B82F6", "#81D4FA", "#42A5F5"]}
/>

Multiple Pulses Example

<PulseLoaderKit
  isLoaderInAction={true}
  dotCount={5}
  dotColor="#49C91C"
  message="Loading 5 dots..."
  messageColor="#000"
  dotSize={10}
  interval={300}
/>

Contributing

Contributions are welcome! Please follow these steps to contribute:

Opening an Issue

Go to the Issues page.
Click on the "New Issue" button.
Provide a clear and descriptive title for the issue.
Describe the issue in detail, including steps to reproduce, expected behavior, and any relevant screenshots or code snippets.

Submitting a Pull Request

Fork the repository by clicking the "Fork" button on the repository page.

Clone your forked repository to your local machine:

git clone https://github.com/your-username/react-native-pulse-loader-kit.git

Create a new branch for your feature or bugfix:
```
git checkout -b feature-or-bugfix-name
```
Make your changes and commit them with a clear and descriptive commit message:
```
git commit -m "Description of the changes"
```
Push your changes to your forked repository:
```
git push origin feature-or-bugfix-name
```
Open a pull request from your forked repository to the main repository. Provide a clear and descriptive title and description for your pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Author

Leonardo Moura - binaryleo - 2024 Find me on LinkedIn

Acknowledgements

Thanks to all the contributors and the open-source community for their support.

react component pulse progress loader

expo-linear-gradient react-native

1.0.1

8 months ago

1.0.0

8 months ago