open-index/open-npm huggingface dataset:
npm package: @rodrigowpl/react-password-strength
Description: React component based on dropbox algorithm for Password Strength Estimation
Author: Rodrigo Wippel
Latest version: 1.0.0

# react-password-strength

> React component with [zxcvbn](https://github.com/dropbox/zxcvbn)

You can see running example: https://rodrigowp.github.io/react-password-strength/

![](https://github.com/RodrigoWP/react-password-strength/blob/master/example.gif)

### Installation

### for npm users
```console
npm i --save @rodrigowpl/react-password-strength
```

### for yarn users
```console
yarn add @rodrigowpl/react-password-strength
```

## Usage

```jsx
import ReactPasswordStrength from '@rodrigowpl/react-password-strength'

<ReactPasswordStrength
  passwordValue='whatever-password'
/>
```

### Props

| Property | Type | Default | Description |
|:---|:---|:---|:---|
| width | number | 300 | Set width of container element
| passwordValue | string | undefined | Value that will be validate

## Contributing

### Dependencies:

- Node.js `>=` v8;

### Up and running

- Install dependencies: `yarn` (or `npm i`);
- Run `yarn start` (or `npm run start`) to develop on `http://localhost:3000`
- Run `yarn build` (or `npm run build`) for production build (files will be generated in the `dist` directory)

### Scripts

- `yarn build (or npm run build)`: Build project to production
- `yarn storybook (or npm run storybook)`: Run Storybook on `6006` port
- `yarn storybook:build`: Build Storybook to static files
- `npm run pub`: Publish to npm

## License

[MIT](https://github.com/RodrigoWP/licenses/blob/master/LICENSE) &copy; Rodrigo Wippel
npm package: @rodrigowpl/react-progress
Description: Beautiful progress bar with React
Author: Rodrigo Wippel
Latest version: 1.0.4

# react-progress

> Beautiful progress bar with React

You can see running example: https://rodrigowp.github.io/react-progress/

![](https://github.com/RodrigoWP/react-progress/blob/master/example.gif)

### Installation

### for npm users
```console
npm i --save @rodrigowpl/react-progress
```

### for yarn users
```console
yarn add @rodrigowpl/react-progress
```

## Simple usage

```jsx
import { Progress } from '@rodrigowpl/react-progress'

<Progress />
```

## Custom usage

```jsx
  <Progress
    backgroundColor='#fcdfdf'
    progressColor='#f9575b'
    height={10}
  />
```

### Props

| Property | Type | Default | Description |
|:---|:---|:---|:---|
| backgroundColor | string | transparent | Set background color to wrapper element
| progressColor | string | #6197c6 | Set progress bar background color
| height | number | 3 | Set progress bar height
| position | string | absolute | Set progress bar layout position
| fromTop | number | 0 | Set progress position from parent top

## Contributing

### Dependencies:

- Node.js `>=` v8;

### Up and running

- Install dependencies: `yarn` (or `npm i`);
- Run `yarn storybook` (or `npm run storybook`) to storybook on `http://localhost:6006`
- Run `yarn storybook:build` (or `npm run storybook:build`) for docs build (files will be) generated in the `docs` directory)
- Run `yarn build` (or `npm run build`) for production build (files will be generated in the `dist` directory)

### Scripts

- `yarn build (or npm run build)`: Build project to production
- `yarn storybook (or npm run storybook)`: Run Storybook on `6006` port
- `yarn storybook:build`: Build Storybook to static files
- `npm run pub`: Publish to npm

## License

[MIT](https://github.com/RodrigoWP/licenses/blob/master/LICENSE) &copy; Rodrigo Wippel
npm package: @rodriguez-facundo/drawerfy
Description: A simple yet exquisite drawer for your cool webapp
Author: Rodriguez Facundo Luis
Latest version: 1.0.5

# @rodriguez-facundo/drawerfy

[![npm](https://img.shields.io/npm/v/@rodriguez-facundo/drawerfy.svg)](https://github.com/rodriguez-facundo/drawerfy)
[![GitHub license](https://img.shields.io/github/license/rodriguez-facundo/drawerfy.svg?style=popout)](https://github.com/rodriguez-facundo/drawerfy/blob/master/LICENSE)

### A simple yet fluent and exquisite drawer for your cool webapp
npm package: @rodrisanchez12/ga4mp
Description: An Open-Source Google Analytics 4 Client-Side Protocol Implementation
Author: David Vallejo
Latest version: 0.0.10


# GA4MP - Google Analytics 4 Measurement Protocol

This is an open-source implementation for the *client-side* protocol used by **Google Analytics 4**. When I mention "**client-side**" is because it must be differentiated with the official [GA4 Measurement Protocol](https://developers.google.com/analytics/devguides/collection/protocol/ga4) offered by Google.
  
This library implements the public **Google Analytics 4** protocol to make possible to do a full server-side tracking using NODE/JS which is not actually possible with the official **Measurement Protocol** , which is meant only to augment the current GA4 data and it's not ready for doing a full tracking.
  
Main differences with the official offerser server-side protocol are:

- Trigger new sessions and visits starts
- Track Sessions attribution
- Override the User IP to populate the GEO Details
- View the hits on the DebugView
- Override ANY value you want
- Easily portable to other languages

If we compare this library with the official GTAG implementation.

 - Lightweight 8.7kb (<4kb compressed ) 95.6% Lighter than a GTAG Container
![image](https://user-images.githubusercontent.com/1494564/201500771-f54c592b-4f37-4ac1-9a89-87878987cc33.png)
 - Privacy Compliant: Full control over which cookies are created/read and sent to Google
 - Dual Tracking (send hits to multiple measurement Ids)

## Usage

#### **ES6 Imports**

    import  ga4mp  from  '@analytics-debugger/ga4mp'
    const  ga4track = ga4mp(["G-THYNGSTER"], {
    	user_id:  undefined,
    	non_personalized_ads:  true,
    	debug:  true
    });

#### **Browser**
<.script  src="https://cdn.jsdelivr.net/npm/@analytics-debugger/ga4mp@latest/dist/ga4mp.umd.min.js">< /script>

    const  ga4track  =  ga4mp(["G-THYNGSTER"],  {
    	user_id: undefined,
    	non_personalized_ads: true,
    	debug: true
    });

#### **NODE.JS**

    const  ga4mp = require('./dist/ga4mp')
    const  ga4track = ga4mp(["G-THYNGSTER"], {
    	user_id:  undefined,
    	non_personalized_ads:  true,
    	debug:  true
    });

# More API details
Read more at: https://ga4mp.dev/
npm package: @rodrisu/friendly-ui
Description: Friendly Travel - BlaBlaCar React UI component library
Author: @blablacar/spa
Latest version: 1.0.102

# BlaBlaCar React component library
[![Build Status](https://travis-ci.org/blablacar/ui-library.svg?branch=master)](https://travis-ci.org/blablacar/ui-library)
[![npm version](https://img.shields.io/npm/v/@blablacar/ui-library.svg)](https://www.npmjs.com/package/@blablacar/ui-library)

## Installation
BlaBlaCar `ui-library` is available as an [npm package](https://www.npmjs.com/package/@rodrisu/friendly-ui)

Just run this inside your project
```bash
npm i @rodrisu/friendly-ui
```

## Usage
Import the package into your `package.json`. You will also need the following peer dependencies:
```
"dependencies": {
    ...
    "@rodrisu/friendly-ui": "<CURRENT_VERSION>",
    "react": "<CURRENT_VERSION>",
    "react-dom": "<CURRENT_VERSION>",
    "styled-components": "<CURRENT_VERSION>",
    "classcat": "<CURRENT_VERSION>",
    ...
}
```
then all you need to do is:
```javascript
import { Button } from '@rodrisu/friendly-ui/build/button'
```
But again, don't forget that you need to have React to make it work.


## Changelog
Check the [changelog](https://github.com/blablacar/ui-library/blob/master/CHANGELOG.md) to stay informed on all updates

## Examples and documentation
You can find examples and tech documentation [here](https://blablacar.github.io/ui-library/).

## Contributing
Wanna contribute ? [This way.](https://github.com/blablacar/ui-library/blob/master/CONTRIBUTING.md) :)

## License
This project is licensed under the terms of the [MIT license](https://github.com/blablacar/ui-library/blob/master/LICENSE).
npm package: @rodrito/react-here-maps
Description: React hooks, components and examples for HERE Maps API JS
Author: toyamarodrigo
Latest version: 1.0.5

# React HERE Maps

This package provides React hooks, components and examples for HERE Maps API for JavaScript.

![image](https://user-images.githubusercontent.com/41844101/221454450-4d1128e0-fb35-4385-969d-c7fae5493beb.png)

Demo: <https://react-here-maps.vercel.app/>

## Installation

```bash
# First add to .npmrc
@here:registry=https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/
```

```bash
# Then install @rodrito/react-here-maps with your favorite package manager
npm install @rodrito/react-here-maps

# or
yarn add @rodrito/react-here-maps

# or
pnpm add @rodrito/react-here-maps
```

## Usage

To use `@rodrito/react-here-maps`, you will need to obtain an API key from HERE Maps. You can sign up for a free account and obtain an API key here.

<https://developer.here.com/tutorials/getting-here-credentials/>

## Example

```jsx
import { HereMap } from "@rodrito/react-here-maps";

const App = () => {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <HereMap
        apikey={"YOUR_API_KEY"}
        options={{
          center: { lat: -34.603722, lng: -58.401592 },
          zoom: 12,
        }}
      >
        {/* Markers, Polylines and stuff */}
      </HereMap>
    </div>
  );
};
```

## TODO

- Components

  - [x] Map
  - [x] Marker
  - [x] Zoom Control (Basic)
  - [x] Scale Bar (Basic)
  - [x] Map Settings (Basic)
  - [x] Polyline
  - [ ] Polygons

## HERE Maps API Docs

<https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/README.html>
npm package: @rodrive/console-vlog
Description: Console Vue Log is a vue plugin. console.vlog() will print the value of a ref/reactive/standard variable and watch for changes
Author: Robin
Latest version: 1.0.1

# Console Vue Log

_A console.log for vue_

### Install

```shell
npm install @rodrive/console-vlog
```

### Usage

`file: src/main.js`

```js
import { createApp } from 'vue';
import App from './App.vue';
import consoleVlog from '@rodrive/console-vlog';

createApp(App).use(consoleVlog, {
  override: false,  // override console.log() [default: false]
}).mount('#app');
```

`file: components/foobar.vue`

```js
const foobar = ref('foo');
const reactiveObj = reactive({ bool: false });

console.vlog(foobar);
console.vlog(reactiveObj);

foobar.value = 'bar';
reactiveObj.bool = true;
```

### Console

```shell
Ref(0): http://localhost:5173/src/App.vue:13:9
   foo
Proxy(0): http://localhost:5173/src/App.vue:14:9
   {bool: false}
Ref(1): http://localhost:5173/src/App.vue:13:9
   bar
Proxy(1): http://localhost:5173/src/App.vue:14:9
   {bool: true}
```
npm package: @rodw95/react-create-safe-context
Description: Helper to create context in TypeScript
Author: Robbie op de Weegh
Latest version: 0.0.1

# react-create-safe-context
Helper to create context in TypeScript with no defaultValue, yet no need to check for undefined.

https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#context

## Example
```js
import createSafeContext from '@rodw95/react-create-safe-context';

type AuthContextValue = {
  state: 'signedIn' | 'signedOut',
};

const AuthContext = createSafeContext<AuthContextValue>();  
export const useAuthContext = Context.hook;

export default ({ children }) => (
  <AuthContext.Provider value={{ state: 'signedIn' }}>
    {children}
  </AuthContext.Provider>
);
```
npm package: @rodw95/use-cancelable-promise
Description: React hook to make promises cancelable and safe
Author: Robbie op de Weegh
Latest version: 0.0.2

# use-cancelable-promise
React hook to make promises cancelable and safe

## Install

```sh
yarn add @rodw95/use-cancelable-promise

// or

npm install @rodw95/use-cancelable-promise
```

## Example

```js
import useCancelablePromise from '@rodw95/use-cancelable-promise';
import React, { useCallback, useState } from 'react';

export default () => {
  const makeCancelable = useCancelablePromise();
  const [state, setState] = useState(null);

  const doFetch = useCallback(
    () => makeCancelable(
      fetchAsync(),
      () => {
        // Optional: do someting on canceled, component is unmounted -> never set state!
        console.log('is canceled');
      },
    )
      .then((result) => {
        // Safe to set state because component is still mounted
        setState(result);
      }),
    [makeCancelable],
  );

  return (
    // ...
  );
};
```

## License

[MIT](LICENSE)
npm package: @rodw95/use-mounted-state
Description: React hook to check mounted state
Author: Robbie op de Weegh
Latest version: 0.0.1

# use-mounted-state
React hook to check mounted state

## Install

```sh
yarn add @rodw95/use-mounted-state

// or

npm install @rodw95/use-mounted-state
```

## Example

```js
import useIsMounted from '@rodw95/use-mounted-state';
import React, { useCallback, useState } from 'react';

export default () => {
	const isMounted = useIsMounted();
	const [state, setState] = useState(null);

	 const doFetch = useCallback(async () => {
		 const result = await fetchAsync();
		 if (isMounted()) {
			 // Only set state if still mounted
			 setState(result);
		 }
	 });

	 return (
		 // ...
	 );
};
```

## License

[MIT](LICENSE)
npm package: @rodys/week
Description: CLI tool to get the current ISO week number.
Author: Rody van Sambeek
Latest version: 1.0.4

# @rodys/week

A simple package to get the current ISO week number using CLI or in code. 

## Usage from CLI

This tool can also be run directly with `npx` on the command line, there's no need for a global installation. Simply run the following command in your terminal to use it:

```sh
npx @rodys/week
```

## Usage in Code
You can also use @rodys/week directly in your JavaScript or TypeScript projects to get the current ISO week number programmatically.

### Installation
To use it in code, you can install it using *nodejs*.

```sh
npm install @rodys/week
```

Then you can use it in your code:

```js
import getCurrentISOWeek from '@rodys/week';

// Get the current ISO week number
const weekNumber = getCurrentISOWeek(new Date());
console.log(`Current ISO week number: ${weekNumber}`);
```