open-index/open-npm huggingface dataset:
npm package: @jackhou147/react-sliding-side-panel
Description: A sliding panel for React applications
Author: Benedicte Giraud
Latest version: 2.0.8

# react-sliding-side-panel

# [Demo](https://benedictegiraud.github.io/react-sliding-side-panel/)

# Installation and usage

The easiest way to use react-sliding-side-panel is to install it from npm and build it into your app with Webpack.

```
npm install --save react-sliding-side-panel
```

Then use it in your app:

```js
import React, { useState } from 'react';
import SlidingPanel from 'react-sliding-side-panel';
import 'react-sliding-side-panel/lib/index.css';

const App = () => {
  const [openPanel, setOpenPanel] = useState(false);
  return (
    <div>
      <div>
        <button onClick={() => setOpenPanel(true)}>Open</button>
      </div>
      <SlidingPanel
        type={'left'}
        isOpen={openPanel}
        size={30}
      >
        <div>
          <div>My Panel Content</div>
          <button onClick={() => setOpenPanel(false)}>close</button>
        </div>
      </SlidingPanel>
    </div>
  );
};

export default App;
```

- [Example with typescript](https://github.com/BenedicteGiraud/react-sliding-side-panel/tree/master/examples/example2-typescript)
- [Example with nextJS](https://github.com/BenedicteGiraud/react-sliding-side-panel/tree/master/examples/example3-nextjs)

## Props

Common props you may want to specify include:

- `type` - left | right | top | bottom, specify the sliding panel position
- `size` - number between 0 and 100, specify the sliding panel size in percentage of the page size
- `isOpen` - boolean, open or close the sliding panel

This component uses [CSSTransition](http://reactcommunity.org/react-transition-group/css-transition) under the hood, so you can also specify the following props:

- `panelContainerClassName` - an optional additional classname for the panel container
- `panelClassName` - an optional additional classname for the panel content
- `noBackdrop` - an optional boolean to set to true if you don't want a backdrop panel
- `onOpen` - Similar to [onEnter](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onEnter)
- `onOpening` - Similar to [onEntering](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onEntering)
- `onOpened` - Similar to [onEntered](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onEntered)
- `onClose` - Similar to [onExit](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onExit)
- `onClosing` - Similar to [onExiting](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onExiting)
- `onClosed` - Similar to [onExited](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onExited)
- `backdropClicked` - Callback called when the backdrop is clicked
npm package: @jackhuynh1995/named-pipes
Description: Windows named pipes for node
Author: Adam Laycock
Latest version: 0.0.5

# named-pipes

Easy to use IPC emitter using Windows Named Pipes.

## Installation

```
npm install named-pipes --save
```

## Usage

### Server

```coffee
NamedPipes = require 'named-pipes'

server = NamedPipes.listen('your-pipe-name')

server.on 'connect', (client) ->
  console.log 'New Client'

  client.send 'welcome', 'something' # THis gets passed to emit on the client side
```

### Client

```coffee
NamedPipes = require 'named-pipes'

pipe = NamedPipes.connect('your-pipe-name')

pipe.on 'welcome', (str) ->
  console.log str # Outputs 'something'
```
npm package: @jackhuynh1995/strapi-google-auth
Description: GoogleAuth helps you to easily create google authentication available for your users. It uses the official google-auth library to execute the actions.
Author: Arju S Moon
Latest version: 0.2.2

# GoogleAuth

GoogleAuth helps you to easily create google authentication available for your users. It uses the official google-auth library to execute the actions. You can get it working in under 2 minutes in your application. EASY!

![Dashboard Screenshot](https://arju-public.s3.ap-south-1.amazonaws.com/Screenshot+2022-05-02+at+1.37.12+AM.png)

# Features

- Official GoogleAPIs integration
- Using strapi default user-permission collection
- JWT Authentication
- Sanitized response
- Highly secure

# Activate the Plugin

Add the folling lines of code in the file: config/plugins.js

```js
module.exports = {
  "strapi-google-auth": {
    enabled: true,
  },
};
```

# Configuration

1. Create a google project from the [Google Cloud Console](https://console.cloud.google.com/projectcreate?previousPage=%2Fcloud-resource-manager%3Fproject%3D%26folder%3D%26organizationId%3D).
2. Create OAuth Consent Screen (Nav Menu -> APIs & Services -> [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent)).
3. Go to [Credentials](https://console.cloud.google.com/apis/credentials), click create credentials -> OAuth Client ID
4. Input the CLIENT_ID, CLIENT_SECRET, REDIRECT URL & the Scopes in the plugin page of Strapi, and save it.

# How to use

### Get Google Authentication URL

```js
   {
       method: 'GET',
       path: 'STRAPI_BACKEND_URL/strapi-google-auth/init',
   }
```

After google login, it will redirect the user back to the redirect URL mentioned in the Google project console, with a code parameter in the URL. https://REDIRECT_URL?code=REDIRECTION_AUTH_CODE

### Authenticate User

Use the REDIRECTION_AUTH_CODE you have recieved from the step 1 to make the second request to authenticate the user.

```js
    {
        method: 'POST',
        path: 'STRAPI_BACKEND_URL/strapi-google-auth/user-profile',
        data: {
            code:REDIRECTION_AUTH_CODE
        }
    }
```

### Get Authenticated user details

Use the JWT token to fetch the user details.

```js
    {
        method: 'GET',
        path: 'STRAPI_BACKEND_URL/strapi-google-auth/me',
        header: {
            authorization:Bearer <TOKEN>
        }
    }
```

### Create/Update Password for user account.

Use the JWT token to fetch the user details.

```js
    {
        method: 'POST',
        path: 'STRAPI_BACKEND_URL/strapi-google-auth/update-password',
        header: {
            authorization:Bearer <TOKEN>
        },
        data:{
            "password":"<NEW PASSWORD>"
        }
    }
```

# Report Bugs/Issues

Any bugs/issues you may face can be submitted as issues in the Github repo.
npm package: @jackhuynh1995/tailwindcss-object-fit
Description: Generate utility classes for object-fit properties
Author: Hendrik Werner
Latest version: 1.0.1

# Object-fit - TailwindCSS Plugin

This plugin generates classes for object-fit image properties.

## Installation

Pull it in through npm or yarn:

```bash
npm install @jackhuynh1995/tailwindcss-object-fit
```

## Usage

Just add it to the plugins array of your Tailwind config.

```js
plugins: [
  // Other plugins
  require('tailwindcss-object-fit')(['responsive']),
],
```

By default the plugin generates the following classes:

```css
.object-contain: { objectFit: 'contain' }
.object-cover: { objectFit: 'cover' }
.object-fill: { objectFit: 'fill' }
.object-none: { objectFit: 'none' }
.object-scale: { objectFit: 'scale-down' }
```

## License

This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @jackhuynh1995/vue-cli-plugin-envhot
Description: hot reloading your .env files, never worry about restarting yor wde
Author: @serializedowen
Latest version: 1.0.3

# vue-cli-plugin-envhot

Seamlessly add .env file hot reloading support for your vue-cli based projects. Never worry about rebooting webpack-dev-server again.

## Features & Tips

1. Reference [Here](https://cli.vuejs.org/guide/mode-and-env.html) for usage of .env file.
1. Modify .env files in runtime and have it dynamically injected into your application
1. Support modification, addtion, deletion of field in .env files
1. Only works in development mode. In production mode you won't need hot reload anyway.
1. Priority of file is `[".env.development.local", ".env.development", ".env.local", ".env"]`, i.e., value with same key defined in '.env.local' will overwrite value defined in '.env'

## Installation

```bash
yarn add vue-cli-plugin-envhot
```

OR

```bash
npm install -S vue-cli-plugin-envhot
```
npm package: @jackhuynh1995/vue-concurrency
Description: A library for encapsulating asynchronous operations and managing concurrency for Vue + Composition API
Author: Martin Malinda
Latest version: 4.0.1

# 🚦 vue-concurrency

[![Test Coverage](https://api.codeclimate.com/v1/badges/59a2cde627ebcefcbba4/test_coverage)](https://codeclimate.com/github/MartinMalinda/vue-concurrency/test_coverage) [![gzip size](http://img.badgesize.io/https://unpkg.com/vue-concurrency/dist/vue2/vue-concurrency.modern.js?compression=gzip&label=gzip)](https://unpkg.com/vue-concurrency/dist/index.modern.js) [![npm](https://img.shields.io/npm/v/vue-concurrency)](https://www.npmjs.com/package/vue-concurrency)

Inspired by [ember-concurrency](http://ember-concurrency.com/).

A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API.

vue-concurrency aims to provide a reasonable abstraction for performing asynchronous operations. It reduces boilerplate code, provides reliable derived state and allows new approaches to techniques like throttling, debouncing, polling. Read more about why and how in the docs:

- 📖 [Documentation](https://vue-concurrency.netlify.app/)

## Features

- Vue 3 + Vue 2.7 (Version >= 4.x)✅
- Vue 2 + [@vue/composition-api](https://github.com/vuejs/composition-api) (Version < 4.x) ✅
- **TypeScript support**
- **Async cancellation** via generator functions and [CAF](https://github.com/getify/CAF)
- Providing `AbortSignal` to **abort XHR/Fetch requests**
- **Derived reactive state** to track status of async operations: `isRunning, isIdle, isFinished, isCancelled` and more
- **Concurrency management**: `drop()`, `restartable()`, `enqueue()` and other tasks
- **SSR support** (experimental)

## Installation

- 📦 [Installation instructions](https://vue-concurrency.netlify.app/installation/)

## Demos

- 🔍 [Autocomplete](https://vue-concurrency.netlify.app/examples/autocomplete/)
- 🚦 [Concurrency](https://vue-concurrency.netlify.app/managing-concurrency/)

## Support

Subscribe to me on [herohero](https://herohero.co/martin) to receive bi-weekly coding tips, hacks and other distilled knowledge from my day to day work. I'm building herohero using Vue 3 and vue concurrency:).

## License

MIT
npm package: @jackhuynh1995/vue-cool-lightbox
Description: A fork of pretty Vue.js component to display an image gallery lightbox inspired by fancybox with VK Video support
Author: Lucas Pulliese
Latest version: 1.3.0

<!-- eslint-disable markdownlint/md025 -->

# A slightly rewritten fork of the original package with VK Video and Boomstream support

> The content below is unchanged except for the name of the package

# No longer maintained

Seeing that Vue 3 came out and I don't have more time to maintain it, I think it's a good time to archive it.
Thanks to the community to help me to maintain it and thanks to the ones who used it on their projects, was an awesome experience ♥️

# Vue-cool-lightbox

Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by [fancybox](http://fancyapps.com/fancybox/3/) with zoom, swipe, captions and videos supported.

![Vue CoolLightbox screenshot](http://lucaspulliese.com/wp-content/themes/theme/images/screenshot-vue-cool-lightbox.jpg)

## Installation

Use npm to install vue-cool-lightbox.

```bash
npm install --save @jackhuynh1995/vue-cool-lightbox
```

and use the lightbox:

```javascript
import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

export default {
  components: {
    CoolLightBox,
  },
}
```

## Docs

You can see the complete documentation with examples here: [https://vue-cool-lightbox.lucaspulliese.com/](https://vue-cool-lightbox.lucaspulliese.com/).

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

[MIT](https://choosealicense.com/licenses/mit/)

## Donate

I am very happy with the feedback from the community and it makes me want to continue working on this component and create more, so any help is welcome.

[Donate here](http://paypal.me/lucaspdonations)
npm package: @jackhuynh1995/vue3-facebook-login
Description: Powerful, lightweight Facebook login component for Vue 3
Author: HealerNguyen
Latest version: 0.1.6

# Vue 3 facebook login

[![npm](https://img.shields.io/npm/v/@healerlab/vue3-facebook-login?style=flat-square)](https://www.npmjs.com/package/@healerlab/vue3-facebook-login)
[![npm](https://img.shields.io/npm/dw/@healerlab/vue3-facebook-login?style=flat-square)](https://www.npmjs.com/package/@healerlab/vue3-facebook-login)
[![GitHub](https://img.shields.io/github/license/healerlab/vue3-facebook-login?style=flat-square)](https://github.com/healerlab/vue3-facebook-login/blob/main/LICENSE)

## Demo
[Demo and docs](https://healerlab.github.io/vue3-facebook-login)

## Installation

### Prerequisites

- [Node.js](https://nodejs.org/) version 16 or higher.
- Text Editor.
  - [VSCode](https://code.visualstudio.com/) is recommended, along with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar).

To get started, you can install `vue3-facebook-login` with:

```bash
npm i @healerlab/vue3-facebook-login
```

with pnpm:

```bash
pnpm add @healerlab/vue3-facebook-login
```

with yarn:

```bash
yarn add @healerlab/vue3-facebook-login
```



## Usage
See the [FaceBook Graph API](https://developers.facebook.com/tools/explorer) for more information about scope.

Import the component and register it locally in your Vue component:

```vue
<script setup>
import { HFaceBookLogin } from '@healerlab/vue3-facebook-login';

const onSuccess = (response) => {
  // get your auth token and info
}

const onFailure = () => {
  // logic if auth failed
}
</script>
```

Use the component in your template:

```vue
<HFaceBookLogin 
  v-slot="fbLogin" 
  app-id="391069538168549" 
  @onSuccess="onSuccess" 
  @onFailure="onFailure"
  scope="id,name,email,first_name,last_name,birthday"
>
  <span @click="fbLogin.initFBLogin" class="fb-button">Login with facebook</span>
</HFaceBookLogin>
```

This is style for this example and not required, you can change and customize it to match your use-case:
```scss
.fb-button {
  display: inline-block;
  margin: 10px 0 10 0;
  color: white;
  background-color: #1967d2;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
}
```

See the [Vue3 FaceBook Login](https://healerlab.github.io/vue3-facebook-login) page for more information.