open-index/open-npm huggingface dataset:
npm package: @leafyjava/react-click-away
Description: Use this component to wrap other components to detect if it is clicked outside of the wrapped container.
Author: zhenyanghua
Latest version: 1.0.3

# react-click-away

> Use this component to wrap other components to detect if it is clicked outside of the wrapped container.

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

## Demo

[https://zhenyanghua.github.io/react-click-away/](https://zhenyanghua.github.io/react-click-away/)

## Install

```bash
npm install --save @leafyjava/react-click-away
```

## Usage

```tsx
import React from 'react'

import ClickOutside from '@leafyjava/react-click-away'

const App = () => {
  const [clicked, setClicked] = React.useState(false);

  const handleClickOutside = () => {
    setClicked(clicked => !clicked);
  }

  return (
    <div>
      <ClickOutside onClickOutside={handleClickOutside}>
        <h1>Click Outside of this Box to Toggle</h1>
      </ClickOutside>
      {clicked && <h1>Clicked Outside Toggled</h1>}
    </div>

  )
}

export default App
```

## License

MIT © [zhenyanghua](https://github.com/zhenyanghua)
npm package: @leahcimic/nuxt-segment
Description: Nuxt.js module for Segment Analytics.js
Latest version: 0.2.12

# nuxt-segment

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Dependencies][david-dm-src]][david-dm-href]
[![Standard JS][standard-js-src]][standard-js-href]

> Nuxt.js module for Segment Analytics

This module uses [vue-segment](https://github.com/dansmaculotte/vue-segment) to add Segment Analytics to a Nuxt.js app.

[📖 **Release Notes**](./CHANGELOG.md)

## Setup

- Add `@dansmaculotte/nuxt-segment` dependency using yarn or npm to your project
- Add `@dansmaculotte/nuxt-segment` to `modules` section of `nuxt.config.js`
3. Configure it:

```js
{
  modules: [
    // Simple usage
    '@dansmaculotte/nuxt-segment',

    // With options
    [
      '@dansmaculotte/nuxt-segment',
      { /* module options */ }
    ],
  ],

  // Or with global options
  segment: {
    writeKey: '',
    disabled: false,
    useRouter: true
  }
}
```

## Options

### writeKey

- Type: `String`
  - Default: `process.env.SEGMENT_WRITE_KEY || ''`

### disabled

- Type: `Boolean`
  - Default: `process.env.SEGMENT_DISABLED || false`

### useRouter

- Type: `Boolean`
  - Default: `process.env.SEGMENT_USE_ROUTER || true`

## Usage

Inside a Vue component, the Segment `analytics` object is available as `this.$segment`:

```js
export default {
  mounted () {
    this.$segment.identify('f4ca124298', {
      name: 'Michael Bolton',
      email: 'mbolton@initech.com'
    });
    this.$segment.track('Signed Up', { plan: 'Enterprise' });
    this.$segment.page('Pricing');
  }
}
```

`$segment` is also injected into the [Nuxt context](https://nuxtjs.org/api/context/) so you can access it within your Vuex stores:

```js
export default {
  LOGOUT({ dispatch }) {
    return this.$auth.logout()
      .then(() => {
        this.$segment.reset();
        return dispatch('AFTER_LOGOUT');
      })
  }
}
```


## Development

- Clone this repository
- Install dependencies using `yarn install`
- Start development server using `npm run dev`

## License

[MIT License](./LICENSE.md)

<!-- Badges -->
[npm-downloads-src]: https://img.shields.io/npm/dt/@dansmaculotte/nuxt-segment.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/@dansmaculotte/nuxt-segment

[npm-version-src]: https://img.shields.io/npm/v/@dansmaculotte/nuxt-segment/latest.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/@dansmaculotte/nuxt-segment

[david-dm-src]: https://david-dm.org/dansmaculotte/nuxt-segment/status.svg?style=flat-square
[david-dm-href]: https://david-dm.org/dansmaculotte/nuxt-segment

[standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square
[standard-js-href]: https://standardjs.com
npm package: @leakage/nuxt-test-module
Description: <!-- Get your module up and running quickly.
Latest version: 1.1.4

<!--
Get your module up and running quickly.

Find and replace all on all files (CMD+SHIFT+F):
- Name: My Module
- Package name: my-module
- Description: My new Nuxt module
-->

# My Module

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

My new Nuxt module for doing amazing things.

- [✨ &nbsp;Release Notes](/CHANGELOG.md)
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
<!-- - [📖 &nbsp;Documentation](https://example.com) -->

## Features

<!-- Highlight some of the features your module provide here -->
- ⛰ &nbsp;Foo
- 🚠 &nbsp;Bar
- 🌲 &nbsp;Baz

## Quick Setup

1. Add `my-module` dependency to your project

```bash
# Using pnpm
pnpm add -D my-module

# Using yarn
yarn add --dev my-module

# Using npm
npm install --save-dev my-module
```

2. Add `my-module` to the `modules` section of `nuxt.config.ts`

```js
export default defineNuxtConfig({
  modules: [
    'my-module'
  ]
})
```

That's it! You can now use My Module in your Nuxt app ✨

## Development

```bash
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release
```

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/my-module

[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/my-module

[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/my-module

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com