open-index/open-npm huggingface dataset:
npm package: @fazin/loader-button
Description: A simple loader button that can be used as a loading button and regular button with some additional capabilities and all native button functionalities.
Latest version: 0.0.4


# React Loader Button
A simple loader button that can be used as a loading button and regular button with some additional capabilities and all native button functionalities.

## Installation

Install using NPM or YARN

```bash
npm install @fazin/loader-button
```
Or
```bash
yarn add @fazin/loader-button
```
    
## Props

| Name              | Usage    |Value Type                      |
| ----------------- | -------- | ------------------------------ |
| label             | Required | string                         |
| loading           | Optional | boolean                        |
| loadingSpinnerPos | Optional | 'left' or 'right'              |
| altText           | Optional | string                         |
| keepText          | Optional | boolean                        |
| spinnerStyle      | Optional | React.CSSProperties            |
| spinnerClassName  | Optional | string                         |
| icon              | Optional | HTMLElement or React.ReactNode |
| iconPos           | Optional | 'left' or 'right'              |



```jsx
import {LoaderButton} from '@fazin/loader-button'
function App() {
    const loadingState = true;
  return (
    <div>
    //Simple Button
     <LoaderButton  
        label='Click Me' 
        onClick={()=>console.log('clicked')}
    />
    //loading button 
     <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
    />
    //loadingSpinnerPos - will change the position of loader to either left or right
     <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        loadingSpinnerPos={'left'}
    />
    //altText - alternate text => display some other text while loading
     <LoaderButton  
        label='Click Me' 
        loading={loadingState}
        altText={'wait while loading...'} 
        onClick={()=>console.log('clicked')}
    />
    //keepText - keep text with spinner
     <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        keepText
    />
    //spinnerStyle - style spinner with css
    <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        spinnerStyle={{borderTop: 'blue'}}
    />
    //spinnerClassName - style spinner with css
    <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        spinnerClassName={'my-class-name'}
    />
    //icon - JSX or HTML 
    <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        icon={<i className='fa fa-mouse' ></i>}
    />
    //iconPos -  will change the position of icon to either left or right
    <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        icon={<i className='fa fa-mouse' ></i>}
        iconPos={'right'}
    />
    </div>
  );
}
```
# Thanks
npm package: @fazio/ipfs-upload-button
Description: Customisable HTML Web Component button to upload files to IPFS
Latest version: 0.0.4

# @fazio/ipfs-upload-button

> Customable Web Component button to upload files to IPFS.

## Usage & Installation

  - install NPM package `npm install @fazio/ipfs-upload-button`
  - import the component in your project `import '@fazio/ipfs-upload-button'`
  - create `APIKEY` on [Web3Storage](https://web3.storage/).
  - add the component to your HTML page 
    ```html
    <web3-upload-btn token="YOUR_WEB3STORAGE_APIKEY">
      Upload to IPFS
    </web3-upload-btn>
    ```

### Attributes

You can use the following attribut to toggle the component behavior:

  - `token` - **required** - Your IPFS provider APIKEY or JWT <small>(see [Configuration](https://fazionico.github.io/ipfs-upload-button/install#configuration))</small>.
  - `isdisplayresult` - **optional** - Display the result of the upload in the DOM. Default value is `false`.

### Customization Style

You can customize the component style by using the following CSS-Parts:

  - `btn` - The button element
  - `spinner` - The spinner element
  - `result` - The results display element 

**Example:**

```css
  web3-upload-btn::part(btn) {
    background-color: rgb(0, 162, 255);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }
```

### Handle Events

You can handle the following events from the component:

  - `progress` - The upload progress event. The event detail is the upload progress in percentage.
  - `success` - The upload success event. The event detail is the upload result.
  - `error` - The upload error event. The event detail is the error message.

**Example:**
  
  ```js
  const btn = document.querySelector('web3-upload-btn')
  btn.addEventListener('success', (e) => {
    console.log('Result: ', e.detail);
  });
  ```