open-index/open-npm huggingface dataset:
npm package: @ossamaweb/react-circular-input
Description: Forked react-circular-input
Author: ossamaweb
Latest version: 0.2.5

# react-circular-input

React components for easily composing a circular range input

[![Latest Release][github-release]][npm]
[![Downloads][downloads-badge]][npm]
[![Version][version-badge]][npm]
[![MIT License][license]](LICENSE.md)

[npm]: https://npmjs.com/package/react-circular-input
[downloads-badge]: https://flat.badgen.net/npm/dt/react-circular-input
[version-badge]: https://flat.badgen.net/npm/v/react-circular-input
[license]: https://flat.badgen.net/badge/license/MIT/blue
[github-release]: https://flat.badgen.net/github/release/petecorreia/react-circular-input

```sh
npm i react-circular-input
```

<a href="https://react-circular-input.now.sh"><img src="https://react-circular-input.now.sh/social-example.gif" alt="Animated example image (GIF)"></a>

## Example

```tsx
import {
	CircularInput,
	CircularTrack,
	CircularProgress,
	CircularThumb
} from 'react-circular-input'

export default () => {
	const [value, setValue] = useState(0.25)

	return (
		<CircularInput value={value} onChange={setValue}>
			<CircularTrack />
			<CircularProgress />
			<CircularThumb />
		</CircularInput>
	)
}
```

There's a lot more you can do with the library. From a simple gauge to a fully custom and animated circular input range.

Play around with **[examples at CodeSandbox](https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1)**:

[![Edit react-circular-input](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1)

A declarative and composable approach means we have a lot of flexibility, check out the documentation for how to go further!

## Documentation

Full documentation at **[react-circular-input.now.sh](https://react-circular-input.now.sh)**.

-   [Examples](https://react-circular-input.now.sh/examples)
-   [Components](https://react-circular-input.now.sh/components)
-   [Hooks](https://react-circular-input.now.sh/hooks)

Enjoy! 🎉

---

[Contributing](CONTRIBUTING.md)
|
[Code of Conduct](CODE_OF_CONDUCT.md)
|
[MIT License](LICENSE.md)
npm package: @ossan-engineer/use-online
Description: This is a custom hook that subscribes the browser&#x27;s connection status.
Author: ossan-engineer
Latest version: 1.0.1

# use-online

> React hook for subscribing the browser&#x27;s connection status.

[![NPM](https://img.shields.io/npm/v/use-online.svg)](https://www.npmjs.com/package/use-online) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
yarn add use-online
```

## Usage

```tsx
import React from 'react';

import { useOnline } from 'use-online';

const Example = () => {
  const isOnline = useOnline();
  return <div>{isOnline ? 'ONLINE' : 'OFFLINE'}</div>;
};
```

## License

MIT © [ossan-engineer](https://github.com/ossan-engineer)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @ossareh/react-native-animation-hooks
Description: Easily add React Native animations with hooks
Latest version: 1.0.2

# react-native-animation-hooks

`yarn add react-native-animation-hooks`

The most convenient way to add little animations to your ReactNative application.

```jsx
const Comp = () => {
  const [bool, setBool] = useState(false)
  const toggle = () => setBool(!bool);

  const animatedOpacity = useAnimation({
    toValue: bool ? 1 : 0.5,
  })

  return (
    <Animated.View style={{ opacity: animatedOpacity }}>
      <Text onPress={toggle}>Hello</Text>
    </Animated.View>
  )
}
```

- Tiny interface using hooks and Animated framework
- Compatible with Expo
- Reduce Animated.Value management boilerplate
- Full support for `spring` and `timing` animations
- Typescript definitions

# Advanced example:

This repo is an Expo app that you can run with `yarn start`.

```tsx
import React, { useState } from 'react'
import { Animated, Switch, View, StyleProp, ViewStyle } from 'react-native'

import { useAnimation } from 'AnimationHooks'

const AnimatedShape = ({ style }: { style?: StyleProp<ViewStyle> }) => (
  <Animated.View
    style={[{ width: 50, height: 50, backgroundColor: 'red' }, style]}
  />
)

const ExampleScreen = () => {
  const [bool, setBool] = useState(false)

  const animatedValue = useAnimation({
    type: 'timing',
    initialValue: 1,
    toValue: bool ? 1 : 0,
    duration: bool ? 1000 : 300,
    useNativeDriver: true,
  })

  return (
    <View style={{ flex: 1 }}>
      <View style={{ padding: 10 }}>
        <Switch value={bool} onValueChange={setBool} />
      </View>
      <View
        style={{
          flex: 1,
          padding: 10,
          justifyContent: 'space-around',
          alignItems: 'center',
        }}
      >
        <AnimatedShape
          style={{
            opacity: animatedValue.interpolate({
              inputRange: [0, 1],
              outputRange: [0.3, 1],
            }) as any,
          }}
        />
        <AnimatedShape
          style={{
            transform: [
              {
                scale: animatedValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.5, 1],
                }) as any,
              },
            ],
          }}
        />
        <AnimatedShape
          style={{
            transform: [
              {
                translateX: animatedValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [-100, 100],
                }) as any,
              },
            ],
          }}
        />
      </View>
    </View>
  )
}

export default ExampleScreen
```

# TODO

- Animated XY values
- Tests

# License

MIT

# Hire a freelance expert

Looking for a React/ReactNative freelance expert with more than 5 years production experience?
Contact me from my [website](https://sebastienlorber.com/) or with [Twitter](https://twitter.com/sebastienlorber).
npm package: @ossareh/react-native-uuid-generator
Description: A simple wrapper around the native iOS and Android UUID classes for React Native
Author: Travis Nuttall
Latest version: 4.0.1

# react-native-uuid-generator

[![npm version](https://img.shields.io/npm/v/react-native-uuid-generator.svg?style=flat-square)](https://www.npmjs.com/package/react-native-uuid-generator) [![downloads](https://img.shields.io/npm/dm/react-native-uuid-generator.svg?style=flat-square)](https://www.npmjs.com/package/react-native-uuid-generator)

A simple wrapper around the native iOS and Android UUID classes.
Exposes a single method, `getRandomUUID`.

![Example App Screen Capture](https://raw.githubusercontent.com/traviskn/react-native-uuid-generator/master/media/UUIDGenerator.gif)


## Getting started

`$ npm install react-native-uuid-generator --save`

`$ react-native link react-native-uuid-generator`


## Usage

This library supports both callback and promise interfaces.

```javascript
import UUIDGenerator from 'react-native-uuid-generator';

// Callback interface
UUIDGenerator.getRandomUUID((uuid) => {
  console.log(uuid);
});
// => "42A8A87A-F71C-446B-B81D-0CD16A709625"

// Promise interface
UUIDGenerator.getRandomUUID().then((uuid) => {
  console.log(uuid);
});
// => "BD6120BD-3612-4D56-8957-99F5D6F02C52"
```


## Manual installation

If the `react-native link` command doesn't work, you can also install
the native components of this library manually.

### iOS

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-uuid-generator` and add `RNUUIDGenerator.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNUUIDGenerator.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

### Android

1. Open up `android/app/src/main/java/[...]/MainApplication.java`
  - Add `import io.github.traviskn.rnuuidgenerator.RNUUIDGeneratorPackage;` to the imports at the top of the file
  - Add `new RNUUIDGeneratorPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  ```
    include ':react-native-uuid-generator'
    project(':react-native-uuid-generator').projectDir = new File(rootProject.projectDir,   '../node_modules/react-native-uuid-generator/android')
  ```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  ```
    compile project(':react-native-uuid-generator')
  ```

## Upgrading
See the [changelog](https://github.com/Traviskn/react-native-uuid-generator/blob/master/CHANGELOG.md) for instructions on upgrading to the latest version.

## Example
Check out the example app included in the github repo to see the UUID Generator in action!
I assume you already have the react-native-cli installed, as well as the required iOS or Android dependencies.

```
git clone https://github.com/Traviskn/react-native-uuid-generator.git

cd react-native-uuid-generator/example
npm install
```

Use `react-native run-ios` or `react-native run-android` to run the example.
npm package: @ossareh/serverless-offline-sqs
Description: Emulate AWS λ and SQS locally when developing your Serverless project
Author: godu
Latest version: 1.4.3

# serverless-offline-sqs

This Serverless-offline plugin emulates AWS λ and SQS queue on your local machine. To do so, it listens SQS queue and invokes your handlers.

*Features*:
- [Serverless Webpack](https://github.com/serverless-heaven/serverless-webpack/) support.
- SQS configurations: batchsize.

## Installation

First, add `serverless-offline-sqs` to your project:

```sh
npm install serverless-offline-sqs
```

Then inside your project's `serverless.yml` file, add following entry to the plugins section before `serverless-offline` (and after `serverless-webpack` if presents): `serverless-offline-sqs`.

```yml
plugins:
  - serverless-webpack
  - serverless-offline-sqs
  - serverless-offline
```

[See example](./example/README.md)

## Configure

### Functions

Ths configuration of function of the plugin follows the [serverless documentation](https://serverless.com/framework/docs/providers/aws/events/sqs/).

```yml
functions:
  mySQSHandler:
    handler: handler.compute
    events:
      - sqs: arn:aws:sqs:region:XXXXXX:MyFirstQueue
      - sqs:
          arn: arn:aws:sqs:region:XXXXXX:MySecondQueue
      - sqs:
          queueName: MyThirdQueue
          arn:
            Fn::GetAtt:
              - MyThirdQueue
              - Arn
      - sqs:
          arn:
            Fn::GetAtt:
              - MyFourthQueue
              - Arn
resources:
  Resources:
    MyFirstQueue:
      Type: AWS::SQS::Queue
      Properties:
        QueueName: MyFourthQueue
```

### SQS

The configuration of [`aws.SQS`'s client](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/SQS.html#constructor-property) of the plugin is done by defining a `custom: serverless-offline-sqs` object in your `serverless.yml` with your specific configuration.

You could use [ElasticMQ](https://github.com/adamw/elasticmq) with the following configuration:

```yml
custom:
  serverless-offline-sqs:
    apiVersion: '2012-11-05'
    endpoint: http://0.0.0.0:9324
    region: eu-west-1
    accessKeyId: root
    secretAccessKey: root
```