open-index/open-npm huggingface dataset:
npm package: @keithers98/react-progress-tracker
Description: > NPM: https://www.npmjs.com/package/@keithers98/react-progress-tracker > > GitHub: https://github.com/keithfrazier98/react-progress-tracker
Latest version: 1.6.0

# 🎆 react-progress-tracker 🎆

> NPM: https://www.npmjs.com/package/@keithers98/react-progress-tracker
>
> GitHub: https://github.com/keithfrazier98/react-progress-tracker

A progress tracker creater for react applications. Component based customizalble trackers for tracking your progrss for personal goals. Create timed or incremental trackers with a title and goal and track your progress for a goal you have.


install with:

`npm i @keithers98/react-progress-tracker`

## 🟢 Tracker Container Component 🟢

The < TrackerContainer /> component is the main component in the package, and the only component supported for use at the moment. It makes use of the other components in the file:

- < TrackerForm/>

  - renders a new tracker form

- < Trackers/>

  - renders all existing trackers and toggles editMode input fields

- < ProgressBar/>
  - renders the progess bar

## usage

After installing, import the component from the package:

`import TrackerContainer from '@keithers98/react-progress-tracker/dist/TrackerContainer';`

## props

The TrackerContainer components takes the following props:

| prop             | type                                      | default|use                                                           |
| :--------------- | :---------------------------------------- | :------| :------------------------------------------------------------ |
| trackerData      | array of tracker objects (or a json file) | [] |load the TrackerContainer with predefined trackers            |
| uponGoalComplete | callback function  | ()=>{}                       | the callback will execute when a tracker is completed will be passed the data of the completed tracker |

The props are passed to the TrackerContainer as so:

```
 <TrackerContainer
      trackerData={trackerData}
      uponGoalComplete={(tracker) => {
        console.log("callback", tracker);
      }}
    /> 
```
    

**General**

The tracker container by default will scroll within its own bounds, and only holds the amount of trackers that fill the vertical height of the screen trackers before it begins to scroll. Support for optional scrolling is backlogged.

**editMode**

editMode is toggled when clicking the edit button (upper right hand corner). Upon turning on edit mode the container will grow on the right side to create room for the delete tracker button.

**manual reset**

Currently, only a manual reset option is supported. An update to allow for daily, weekly, monthly, and yearly automatic tracker reset is backlogged and coming soon.

**upcoming features**

Checkout the backlog in the projects section of the repository! If you are interested in collaborating I'd be happy to work with you!
npm package: @keithj/react-native-offline-sync
Description: A React Native library to manage offline API request queuing and automatic syncing when the device regains network connectivity.
Author: keith
Latest version: 1.0.2

# react-native-offline-sync

[![npm version](https://img.shields.io/npm/v/@keithj/react-native-offline-sync)](https://www.npmjs.com/package/@keithj/react-native-offline-sync)

**A lightweight React Native library to queue API requests when offline and automatically sync them when the device is back online.**

## 🚀 Features

- 📡 Detects network status using `@react-native-community/netinfo`
- 📦 Queues failed or offline API requests
- 🔁 Automatically retries requests when online
- 🔄 Retry logic with max retry limit
- 🧠 Real-time queue size tracking
- 🧪 Hook-based API — no Redux required!

---

## 📦 Installation

```sh
npm install @keithj/react-native-offline-sync
```

Or with Yarn:

```sh
yarn add @keithj/react-native-offline-sync
```

You also need to install these peer dependencies:

```sh
yarn add @react-native-async-storage/async-storage @react-native-community/netinfo axios
```

---

## 🧠 Usage

```tsx
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useOfflineSync } from '@keithj/react-native-offline-sync';

export default function App() {
  const { isOnline, enqueueRequest, queueLength } = useOfflineSync();

  const handleSend = () => {
    enqueueRequest({
      request: {
        url: 'https://jsonplaceholder.typicode.com/posts',
        method: 'POST',
        data: {
          title: 'Offline Test',
          body: 'This request will be queued if offline.',
        },
      },
      options: {
        maxRetries: 5,
        preventDuplicate: true, // Optional: avoid enqueueing the same request again
      },
    });
  };

  return (
    <View>
      <Text>Network: {isOnline ? 'Online ✅' : 'Offline ❌'}</Text>
      <Text>Queue Length: {queueLength}</Text>
      <Button title="Send Request" onPress={handleSend} />
    </View>
  );
}
```

> 🔁 By default, the library will retry each request up to **3 times**.  
> You can override this by passing `maxRetries` in the `options` object.

---

## 📌 Roadmap

- [x] Retry with max attempts
- [x] Queue length tracking
- [ ] Pause/resume queue
- [ ] Exponential backoff strategy
- [ ] Devtools panel (debug view)
- [ ] Configurable storage adapter

---

## 🧑‍💻 Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and development workflow.

---

## 📄 License

MIT © [Ketan Jingar](https://github.com/keith212005/react-native-offline-sync)

---

GitHub: [keithj/react-native-offline-sync](https://github.com/keith212005/react-native-offline-sync)

---

> Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)