open-index/open-npm huggingface dataset:
npm package: @kenetto/scribo-signer
Description: >
Author: valentinmirchev
Latest version: 1.0.7

# scribo-signer

> 

[![NPM](https://img.shields.io/npm/v/@kenetto/scribo-signer.svg?style=flat-square)](https://www.npmjs.com/package/scribo-signer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @kenetto/scribo-signer
```

## Usage

```jsx
import React, { Component } from 'react'

import ReceiptSigner from '@kenetto/scribo-signer'
import '@kenetto/scribo-signer/dist/styles.css'

class Example extends Component {
  render () {
    return (
      <ReceiptSigner
        handleConfirmationCompletion={() => {}}
        receipts={[]}
        defaultPhone={''} />
    )
  }
}
```

## Props

<table class="table table-bordered table-striped">
    <thead>
    <tr>
        <th style="width: 100px;">name</th>
        <th style="width: 50px;">type</th>
        <th style="width: 50px;">required</th>
        <th style="width: 50px;">default</th>
        <th>description</th>
    </tr>
    </thead>
    <tbody>
        <tr>
          <td>handleConfirmationCompletion</td>
          <td>Function</td>
          <td>Yes</td>
          <td></td>
          <td>Function to be executed after all items are signed</td>
        </tr>
        <tr>
          <td>receipts</td>
          <td>Array</td>
          <td>Yes</td>
          <td></td>
          <td>
            <p>Array of items containing id and elements.</p>
            <p>Each element should include
            <strong>name</strong> and <strong>units</strong>.</p>
          </td>
        </tr>
        <tr>
          <td>defaultPhone</td>
          <td>String</td>
          <td>No</td>
          <td></td>
          <td>Default phone number</td>
        </tr>
    </tbody>
</table>
npm package: @kenetto/uikit-modal
Description: Uikit Modal Window
Author: valentinmirchev
Latest version: 1.1.5

# uikit-modal

> Uikit Modal Window


![npm](https://img.shields.io/npm/v/@kenetto/uikit-modal.svg)


## Install

```bash
npm install --save @kenetto/uikit-modal
```

## Usage

```jsx
import React from 'react'

import ModalWindow from '@kenetto/uikit-modal'

class Example extends React.Component {
  constructor () {
    super()
    this.state = {
      modalIsOpen: true
    }
    this.toggleModal = this.toggleModal.bind(this)
  }

  toggleModal () {
    this.setState({
      modalIsOpen: !this.state.modalIsOpen
    })
  }

  render () {
    return <div className='uk-container'>
      <button onClick={() => this.toggleModal()}>OPEN</button>
      <ModalWindow
        width={'small'}
        title={'Test'}
        toggleModal={this.toggleModal}
        modalIsOpen={this.state.modalIsOpen}
        footer={<div>
          <button className='uk-button uk-button-default uk-modal-close' type='button'>Cancel</button>
          <button className='uk-button uk-button-primary' type='button'>Save</button>
        </div>}>
        <div>
          <h1>Modal content goes here</h1>
        </div>
      </ModalWindow>
    </div>
  }
}

export default Example

```


## Props

<table class="table table-bordered table-striped">
    <thead>
    <tr>
        <th style="width: 100px;">name</th>
        <th style="width: 50px;">type</th>
        <th style="width: 50px;">required</th>
        <th style="width: 50px;">default</th>
        <th>description</th>
    </tr>
    </thead>
    <tbody>
        <tr>
          <td>title</td>
          <td>String</td>
          <td>Yes</td>
          <td></td>
          <td>Title of the Modal</td>
        </tr>
        <tr>
          <td>toggleModal</td>
          <td>Function</td>
          <td>Yes</td>
          <td></td>
          <td>A function to toggle the modal visibility</td>
        </tr>
        <tr>
          <td>modalIsOpen</td>
          <td>Bool</td>
          <td>Yes</td>
          <td></td>
          <td>Indicates if the modal is open</td>
        </tr>
        <tr>
          <td>footer</td>
          <td>() => React.Node</td>
          <td>No</td>
          <td></td>
          <td>The footer of the modal</td>
        </tr>
        <tr>
          <td>children</td>
          <td>() => React.Node</td>
          <td>Yes</td>
          <td></td>
          <td>The content of the modal</td>
        </tr>
        <tr>
          <td>width</td>
          <td>string</td>
          <td>No</td>
          <td>small</td>
          <td>Indicate what type of width the modal will have. Must be one of the following values:<br/><br/><p>xsmall, small, large, expand</p></td>
        </tr>
        <tr>
          <td>disableClosing</td>
          <td>Bool</td>
          <td>No</td>
          <td>false</td>
          <td>Disables the modal to be closed</td>
        </tr>
    </tbody>
</table>

##Styling the components

###Example

```css

.modal-window {
    ...
}

.modal-window > .header {
    ...
}

.modal-window > .body {
    ...
}

.modal-window > .footer {
    ...
}

```