open-index/open-npm huggingface dataset:
npm package: @nagendrayakkaladevara/react-button-component
Description: A customizable button component for React and TypeScript
Author: Sai Nagendra Yakkaladevara
Latest version: 1.0.1

# @nagendrayakkaladevara/react-button-component

A customizable button component for React and TypeScript.

## Installation

Install the package using npm:

```bash
npm install @nagendrayakkaladevara/react-button-component

```
## Usage

```
import React from 'react';
import { Button } from '@nagendrayakkaladevara/react-button-component';
import '@nagendrayakkaladevara/react-button-component/dist/Button.css';

const App = () => {
  return (
    <div>
      <Button variant="primary" size="large" onClick={() => alert('Button clicked!')}>
        Click Me
      </Button>
    </div>
  );
};

export default App;
```
## Features

- Customizable Styles: Choose from different variants (`'primary'`, `'secondary'`, `'danger'`, `'success'`) and sizes (`'small'`, `'medium'`, `'large'`).
- Event Handling: Easily handle click events with the `onClick` prop.
- CSS Customization: Include the provided CSS file or customize styles further using your own CSS.

## Props

### Button Props

- `variant`: Specifies the button's style variant.
- `size`: Specifies the button's size.
- `onClick`: Event handler for button click events.

<!-- For more detailed usage and customization options, refer to the API documentation. -->
npm package: @naghashyan/ngs-builder
Description: [![NPM Version](http://img.shields.io/npm/v/commander.svg?style=flat)](https://www.npmjs.com/package/@naghashyan/ngs-builder)
Author: Naghashyan Solutions
Latest version: 1.0.3

# NGS cli
[![NPM Version](http://img.shields.io/npm/v/commander.svg?style=flat)](https://www.npmjs.com/package/@naghashyan/ngs-builder)

## Installation

```bash
npm install -g @naghashyan/ngs-builder
```

command list

**watch project**
```
ngs watch
```

**build project**
```
ngs web-build
```

**default ngs.config.json example**
```
{
  "version": "1.0.0",
  "build": {
    "source": "src",
    "appDir": "src/app",
    "output": "htdocs",
    "entry": "src/main.js",
    "watch": true,
    "ignore": [
      "src/styles/mixin"
    ],
    "browserSync": {
      "isEnable": false,
      "rootDir": "src",
      "reload": true,
      "port": 3000,
      "uiPort": 3000,
      "isOpenNewTab": false
    }
  }
}
```


**update symlink**
```
ngs jsupdate -m `module_name`
```
**build js**
```
ngs build -t `type` -m `module_name` -v `build app version`
```
type=js, less, sass

**JS builder.json file example**
```
{
  "version": "1.0.0",  
  "source_dir": "",
  "es5": true,
  "out_dir": "out/js",
  "es5_out_dir": "htdocs/out/js/es5",
  "compress": true,
  "builders": [
    {
      "include": "ngs-cms"
    }
    {
      "out_dir": "ngs",
      "module": "ngs",
      "files": [
        "NGS.js",
        "Dispatcher.class.js",
        "AbstractRequest.class.js",
        "AbstractLoad.class.js",
        "AbstractAction.class.js",
        "AjaxLoader.class.js",
        "CustomEvent.js",
        "NGSEvent.js"
      ]
    }
  ]
}
```

**convert old NGS load and action to es6 js classes**
```
ngs convert -t `type` -m `module_name` -d `loads_actions_directory`
```

convert.config.json should be placed in the root of NGS project

**convert.config.json example**

```
[
  {
    "path": "managers/PagingManager",
    "old_name": "NGS.PagingManager",
    "name": "PagingManager"
  },
  {
    "path": "util/DialogUtility",
    "old_name": "NGS.DialogUtility",
    "name": "DialogUtility"
  }
]
```

**build minify js files**
```
ngs minify -i web/js/util/builder.json`
```


**builder.config.json example**

```
{
  "es5": true,
  "source_dir": "web/js/util/out",
  "out_file": "web/js/ngs/ngs.min.js",
  "es5_out_file": "web/js/ngs/es5-ngs.min.js",
  "compress": true,
  "files": [
    "NGS.js",
    "Events.js"
  ]
}
```
npm package: @nagneo/use-title
Description: React Hook to update your document's title
Author: nagneo
Latest version: 1.0.1

# @react-hooks/use-title

React Hook to update your document's title.

## Installation

#### yarn

`yarn add @nagneo/use-title`

#### npm

`npm i @nagneo/use-title`

## Usage

```js
import React from "react";
import useTitle from "@nagneo/use-title";

function App() {
  useTitle("Welcome");
  return <h1>Welcome</h1>;
}
```

### Arguments

| Argument | Type   | Description                                | Required |
| -------- | ------ | ------------------------------------------ | -------- |
| title    | string | The title you want to use on your document | yes      |
npm package: @nagnu/sweetalert2-react-content
Description: Official sweetalert2 enhancer adding support for React elements as content.
Author: Matthew Francis Brunetti
Latest version: 5.0.9

# sweetalert2-react-content

Official [SweetAlert2](https://sweetalert2.github.io/) enhancer adding support for React elements as content.

[![Build Status](https://github.com/sweetalert2/sweetalert2-react-content/workflows/build/badge.svg)](https://github.com/sweetalert2/sweetalert2-react-content/actions)
[![Coverage Status](https://coveralls.io/repos/github/sweetalert2/sweetalert2-react-content/badge.svg?branch=main)](https://coveralls.io/github/sweetalert2/sweetalert2-react-content?branch=main)
[![npm version](https://img.shields.io/npm/v/sweetalert2-react-content.svg)](https://www.npmjs.com/package/sweetalert2-react-content)

[![semantic-release badge](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/sweetalert2/sweetalert2-react-content/blob/main/CHANGELOG.md)
[![typescript .d.ts included](https://img.shields.io/badge/typescript-ready-brightgreen.svg)](https://github.com/sweetalert2/sweetalert2-react-content/blob/main/src/sweetalert2-react-content.d.ts)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

The following options can be React elements:

- title
- html
- confirmButtonText
- denyButtonText
- cancelButtonText
- footer
- closeButtonHtml
- iconHtml
- loaderHtml

## Installation

```bash
npm install --save sweetalert2 sweetalert2-react-content
```

## Usage Example

```jsx
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'

const MySwal = withReactContent(Swal)

MySwal.fire({
  title: <p>Hello World</p>,
  didOpen: () => {
    // `MySwal` is a subclass of `Swal` with all the same instance & static methods
    MySwal.showLoading()
  },
}).then(() => {
  return MySwal.fire(<p>Shorthand works too</p>)
})
```

The `dist/sweetalert2-react-content.umd.js` file defines `window.sweetalert2ReactContent` in non-CJS/AMD environments.

## Limitations

SweetAlert2 renders its content outside of the `ReactTree`. In order to render React Router components (such as `Link`) you have to wrap them in the routing context which should be the same with the app.

That can be achived by using the [`HistoryRouter`](https://reactrouter.com/docs/en/v6/routers/history-router) with shared `history`. [Please refer to the official code example ↗️](https://sweetalert2.github.io/recipe-gallery/sweetalert2-react-router.html)
npm package: @nagoos/google-maps-autocomplete-vuetify
Description: Vuetify autocomplete component for google places. Easy to link to a google map component!
Author: Jeremy Hall
Latest version: 1.0.4

# @nagoos/google-maps-autocomplete-vuetify

A component to allow users to lookup places, and see their selected place on a map. Uses the google maps places API, Vuetify, and vue2-google-maps.

See [working demo](https://codesandbox.io/s/nagoosgooglemapsautocompletevuetify-example-r2o5h?fontsize=14)

## Installation

`yarn add @nagoos/google-maps-autocomplete-vuetify`

## Setup

This component requires two main libraries to work: [Vuetify](https://vuetifyjs.com/), and [vue2-google-maps](https://github.com/xkjyeah/vue-google-maps)

This component won't work until you setup the `vue2-google-maps` library with your google maps api key:

```javascript
import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: {
    key: "<your google api key>",
    libraries: "places"
  }
});
```

This component relies on the `Maps JavaScript API`, `Places API`, and the `Geocoding API` which you can enable from your [google cloud console](https://console.cloud.google.com/google/maps-apis/overview).

## Usage

1. Import the library into your component:

```javascript
import GoogleMapsAutocomplete from "@nagoos/google-maps-autocomplete-vuetify";
```

2. Add to your VueJS component's `components` section:

```javascript
components: {
    GoogleMapsAutocomplete,
    ...
},
```

3. Use in your component's template:

```javascript
<GoogleMapsAutocomplete
    v-model="address"
    :restrict-to-countries="['jp']"
    @initialized="mapsLoaded = true"
    class="ma-1"
    placeholder="Enter a business name"
/>
```

## API

### v-model

When a user selects a place, the v-model is updated with a json object representing the selected place.

Example:

```json
{
  "name": "WAGYUMAFIA THE BUTCHER’S KITCHEN",
  "address": "WAGYUMAFIA THE BUTCHER’S KITCHEN, 1 Chome-14-16 Nishiazabu, Minato City, Tokyo, Japan",
  "placeId": "ChIJz55I6XqLGGARpI3NfnSQINk",
  "location": {
    "lat": 35.6611479,
    "lng": 139.72333349999997
  }
}
```

### restrict-to-countries

Pass an array of countries to limit the Places results to those countries.

### initialized

The component will emit an `initialized` event once the Google Maps libraries are ready, and it has prepared itself. Once this event has been emitted, you know it is safe to load a google map.

### placeholder

Pass a placeholder to the component's autocomplete input. This lets you display a message when the input is blank.

### noResultsFoundMessage

Pass a message to be displayed when the Google Places API couldn't find any results.