open-index/open-npm huggingface dataset:
npm package: @grosto/jest-create-mock-instance
Description: Forked from [jest-create-mock-instance](https://github.com/asvetliakov/jest-create-mock-instance).
Author: giorgi.rostomashvili@inthepocket.com
Latest version: 0.2.0

# jest-create-mock-instance

Forked from [jest-create-mock-instance](https://github.com/asvetliakov/jest-create-mock-instance).

The original library stopped working with Jest 27.
npm package: @grotcore/autorole
Description: Automatically assigns preset roles to new members when they join the server and provides interactive buttons or modals that let users self-assign additional roles.
Latest version: 0.1.0

# AutorolePlugin
Automatically assigns preset roles to new members when they join the server and provides interactive buttons or modals that let users self-assign additional roles. Ideal for onboarding and organizing your community with minimal moderation effort.
npm package: @grotcore/welcome
Description: A Discord bot plugin that welcomes new members and sends farewell messages when they leave. Supports customizable channels, multiple message types (plain text, embeds, or ComponentsV2), and dynamic username replacement in messages.
Latest version: 0.1.0

# WelcomePlugin
A Discord bot plugin that welcomes new members and sends farewell messages when they leave. Supports customizable channels, multiple message types (plain text, embeds, or ComponentsV2), and dynamic username replacement in messages.
npm package: @grotesq/use-fetch
Description: ## 개요
Latest version: 1.0.2

# @grotesq/use-fetch

## 개요

HTTP 클라이언트인 [axios](https://github.com/axios/axios)와 데이터 캐싱 라이브러리인 [SWR](https://swr.vercel.app)의 템플릿 라이브러리입니다. 해당 라이브러리에 대한 이해도가 있다면 더욱 잘 활용할 수 있습니다.

코드만 참조하고 axios 대신 다른 라이브러를 사용하고 싶거나, 패키지 설치 없이 코드를 사용하려면 [/src/index.ts](/src/index.ts) 파일의 복사해서 사용하세요.

## 설치

```shell
# 의존성 패키지 설치
npm i axios swr
# 라이브러리 설치
npm i @grotesq/use-fetch
```

## 사용법

### useFetch

데이터를 불러오고 캐싱합니다.

```js
import useFetch from '@grotesq/use-fetch';

function Component() {
    const { data, error } = useFetch( 'https://jsonplaceholder.typicode.com/todos/1' );

    if( error ) return <>{ JSON.stringify( error ) }</>;
    if( !data ) return <>Loading...</>;
    return <>{ JSON.stringify( data ) }</>;
}
```

### fetcher

캐싱 없이 단일 데이터 호출만 수행합니다.

```js
import { fetcher } from '@grotesq/use-fetch';

fetcher( 'https://jsonplaceholder.typicode.com/todos/1' )
  .then( data => console.log( data ) )
  .catch( console.warn );
```

### prefetch

prefetch, refresh, revalidate 등을 목적으로 사용됩니다.

```js
import { prefetch } from '@grotesq/use-fetch';

function Component() {
    return(
        <button onClick={ () => prefetch( 'https://jsonplaceholder.typicode.com/todos/1' )}>Refresh</button>
    )
}
```

## 자주 묻는 질문

### 왜 의존성 패키지는 따로 설치해야 하나요?
본 패키지의 용량을 줄이려고 그랬습니다.
npm package: @grothar/angular2-signaturepad
Description: Angular2 Component wrapper for szimek / signature_pad
Author: Wulf Solter
Latest version: 4.0.2

# angular2-signaturepad
Angular 2 component for [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).

<< THIS IS NO LONGER IN USE BY OWNER. PROBLEMS CAN AND DO EXIST. PRs ARE SUPER WELCOME, BUT I CAN NOT IDENTIFY WHAT YOUR ISSUES ARE, NOR WILL I CHANGE THINGS BECAUSE ANGULAR HAS CHANGED IN THE YEARS SINCE I WROTE THIS >>

## Install
`npm install angular2-signaturepad --save`

## Reference Implementation

* [Live Demo](http://lathonez.com/angular2-signaturepad-demo/)
* [Source](https://github.com/lathonez/angular2-signaturepad-demo)

## Usage example

API is identical to [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).

Options are as per [szimek/signature_pad](https://www.npmjs.com/package/signature_pad) with the following additions:
* canvasWidth: width of the canvas (px)
* canvasHeight: height of the canvas (px)
The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.

```typescript

// import into app module

import { SignaturePadModule } from 'angular2-signaturepad';

...

@NgModule({
  declarations: [ ],
  imports: [ SignaturePadModule ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})

// then import for use in a component

import { Component, ViewChild } from 'angular2/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';

@Component({
  template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
})

export class SignaturePadPage{

  @ViewChild(SignaturePad) signaturePad: SignaturePad;

  private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
    'minWidth': 5,
    'canvasWidth': 500,
    'canvasHeight': 300
  };

  constructor() {
    // no-op
  }

  ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }

  drawComplete() {
    // will be notified of szimek/signature_pad's onEnd event
    console.log(this.signaturePad.toDataURL());
  }

  drawStart() {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('begin drawing');
  }
}
```