open-index/open-npm huggingface dataset:
npm package: @schibstedspain/sui-form-captcha
Description: > FormCaptcha uses reCAPTCHA v2 with Checkbox variation
Latest version: 1.2.0

# FormCaptcha

> FormCaptcha uses reCAPTCHA v2 with Checkbox variation 

See [documentation](https://developers.google.com/recaptcha/docs/display)

## Installation

```sh
$ npm install @schibstedspain/sui-form-captcha --save
```

## Usage

### Basic usage
```js
import FormCaptcha from '@schibstedspain/sui-form-captcha'

return (
  <FormCaptcha
    locale="es"
    siteKey="key123456789"
    onSubmit={response => console.log(response)}
  />
)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @schibstedspain/sui-form-checkbox
Description: _**Important:**_ _The `@schibstedspain/sui-form-checkbox` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._ _**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elem
Latest version: 1.8.0

### FormCheckbox

_**Important:**_
_The `@schibstedspain/sui-form-checkbox` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._
_**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elements-WIP-dLZacE1Ye7Qxrp7n9Y0Hy)**, when iterate this first provisional component's version to make it fully compliant._

Simple checkbox form element.

You can pass a custom callback to be executed when the checkbox value is changed, through `onChange` property.

Despite it has default icons to represent the states of the checkbox, it allows their customization (for checked/unchecked states) through `svgIcons.checked` and `svgIcons.unchecked` properties.

It also supports to display an error message, if the component's property `errorMessage` is set.
npm package: @schibstedspain/sui-form-pta
Description: > Description
Latest version: 1.11.0

# FormPta

> Description

This component act as a wrapper to show PTA formbuilder APP into an iframe.

## Installation

```sh
$ npm install @schibstedspain/sui-form-pta --save
```

## Usage

### Basic usage
```js
import FormPta from '@schibstedspain/sui-form-pta'

return (
  <FormPta
    enableDraft={false}
    formUrl='http://url.demo'
    redirectOnErrorUrl='http://url.demo/error'
    redirectOnSuccessUrl='http://url.demo/success'
  />
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/form/pta/demo).**
npm package: @schibstedspain/sui-form-range-datepicker
Description: # @schibstedspain/sui-form-range-datepicker > A React component that show a date range. You can select a start date and end date. When press the button, you get the date range between the dates. >  > This component use npm component: [react-datepicker](ht
Latest version: 1.24.0

### FormRangeDatepicker

# @schibstedspain/sui-form-range-datepicker
> A React component that show a date range. You can select a start date and end date. When press the button, you get the date range between the dates.
> 
> This component use npm component: [react-datepicker](https://www.npmjs.com/package/react-datepicker).

## Installation

```sh
npm install @schibstedspain/sui-form-range-datepicker --save
```


## Usage

```javascript
import FormRangeDatepicker from '@schibstedspain/sui-form-range-datepicker'
```

```html
function handleClick (range) {
  console.log('handleClick', range)
}

function handleChangeStart (date) {
  console.log('handleChangeStart', date)
}

function handleChangeEnd (date) {
  console.log('handleChangeEnd', date)
}

<FormRangeDatepicker buttonLabel='Test' handleClickButton={handleClick} handleChangeStart={handleChangeStart} handleChangeEnd={handleChangeEnd} />
```
npm package: @schibstedspain/sui-form-text-input
Description: _**Important:**_ _The `@schibstedspain/sui-form-text-input` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._ _**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-El
Latest version: 1.10.0

### FormTextInput

_**Important:**_
_The `@schibstedspain/sui-form-text-input` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._
_**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elements-WIP-dLZacE1Ye7Qxrp7n9Y0Hy)**, when iterate this first provisional component's version to make it fully compliant._

Basic text-input form element.

You can pass a custom callback to be executed when the text-input value is changed, through ```onChange``` property.

It also supports to display an error message, if the component's property ```errorMessage``` is set.
npm package: @schibstedspain/sui-form-textarea
Description: _**Important:**_ _The `@schibstedspain/sui-form-textarea` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._ _**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elem
Latest version: 1.8.0

### FormTextarea

_**Important:**_
_The `@schibstedspain/sui-form-textarea` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._
_**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elements-WIP-dLZacE1Ye7Qxrp7n9Y0Hy)**, when iterate this first provisional component's version to make it fully compliant._

Basic text-area form element.

A placeholder to specify a short hint of the expected value of the text area (which will be displayed only when the text-area is empty) can be passed in `placeholder` property.

The default height and width of the text area can be defined whether with `cols` and `rows` property, or with a custom CSS class name.

The spellcheck of the inner text of the text area can be disabled (HTML5).

You can pass a custom callback to be executed when the text area value is changed, through `onChange` property.
npm package: @schibstedspain/sui-gigya-global-events
Description: > Description
Latest version: 1.4.0

# GigyaGlobalEvents

> Description

<!-- ![](./assets/preview.png) -->

This component acts as a middleware between Gigya event handler and our components or use cases.
The main reason is because Gigya has no way to clear the registered listeners, this leads to errors when our SPA mounts a component multiple times.

This solution allow us to register as many listeners as we want, and provide us with the ability to unregister on change props or when the component is unmounted.

## Installation

```sh
$ npm install @schibstedspain/sui-gigya-global-events --save
```

## Usage

### Basic usage
```js
import GigyaGlobalEvents from '@schibstedspain/sui-gigya-global-events'

return (<GigyaGlobalEvents onLogin={event => console.log('This will be executed onLogin')} onLogout={event => console.log('This will be executed onLogout')} />)
```

To see the full list of global events check [Gigya Documentation](https://developers.gigya.com/display/GD/accounts.addEventHandlers+JS)

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/gigya/globalEvents).**
npm package: @schibstedspain/sui-gigya-screenset
Description: > Description
Latest version: 1.2.0

# GigyaScreenset

> Description

<!-- ![](./assets/preview.png) -->

Injects a Gigya Screenset (Widget) into a container

## Installation

```sh
$ npm install @schibstedspain/sui-gigya-screenset --save
```

## Usage

### Basic usage
```js
import GigyaScreenset from '@schibstedspain/sui-gigya-screenset'

const screenSetOptions = {
  lang: 'es',
  deviceType: 'auto',
  screenSet: 'Default-RegistrationLogin',
  startScreen: 'Default-Login',
  containerID: 'gigya-login',
  onError: console.log,
  onAfterSubmit: console.log
}

return (<GigyaScreenset screenSetOptions={screenSetOptions} />)
```

To see the definition of `screenSetOptions` check [Gigya documentation](https://developers.gigya.com/display/GD/accounts.showScreenSet+JS)

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/gigya/screenset).**
npm package: @schibstedspain/sui-header-actions
Description: ## Installation
Latest version: 1.3.0

# HeaderActions

## Installation

```sh
> npm install @schibstedspain/sui-header-actions --save
```

## Usage

### Basic usage

```js
import HeaderActions from '@schibstedspain/sui-header-actions'

return <HeaderActions
  buttonLabel='Accept'
  title='Actions header'
  icon={icon}
  onIconClick={() => alert('icon clicked')}
  onButtonClick={() => alert('button clicked')}
/>
```
npm package: @schibstedspain/sui-header-focus
Description: > Simple header with nothing else than a centered logo
Latest version: 1.2.0

# HeaderFocus

> Simple header with nothing else than a centered logo

## Installation

```sh
$ npm install @schibstedspain/sui-header-focus --save
```

## Usage

### Basic usage
```js
import HeaderFocus from '@schibstedspain/sui-header-focus'
const SVGElement = <svg ... />
return (<HeaderFocus logo={SVGElement} />)
```
npm package: @schibstedspain/sui-image-picker
Description: ## Description
Latest version: 1.3.0

# ImagePicker

## Description

Panel with the selected image and a list of images that will replace the selected image as they are clicked.

## Installation

```sh
$ npm install @schibstedspain/sui-image-picker --save
```

## Usage

### Basic usage
```js
import ImagePicker from '@schibstedspain/sui-image-picker'

const images = [
  {
    alt: 'Alternate text for image 1',
    src: 'http://via.placeholder.com/350x150.png/000/fff?text=primary+1',
    thumb: 'http://via.placeholder.com/100.png/000/fff'
  },
  {
    alt: 'Alternate text for image 2',
    src: 'http://via.placeholder.com/150x350.png/666/094?text=primary+2',
    thumb: 'http://via.placeholder.com/100.png/666/094'
  }
]

const actions = [
  {
    callback: (image) => alert('Clicked on action 1 with image ' + image.src),
    node: <div>Action 1</div>
  },
  {
    callback: (image) => alert('Clicked on action 2 with image ' + image.src),
    node: <div>Action 2</div>
  }
]

const params = {
  actions,
  images,
  defaultAlt: 'No text for image',
  emptyImage: <img src="http://URL-EMPTY-IMAGE" alt="Empty image" />,
  onClick: (image) => alert('clicked on image ' + image.src),
  selected: 1
}

return (<ImagePicker {...params} />)
```
npm package: @schibstedspain/sui-image-placeholder
Description: > Shows a placeholder while loading an image. You can also set a fallback to be loaded in case it fails loading the image.
Latest version: 2.6.0

# ImagePlaceholder

> Shows a placeholder while loading an image. You can also set a fallback to be loaded in case it fails loading the image.

## Installation

```sh
$ npm install @schibstedspain/sui-image-placeholder --save
```

## Usage

### Basic usage
```js
import ImagePlaceholder from '@schibstedspain/sui-image-placeholder'

return (
  <ImagePlaceholder
    src='https://satyr.io/1000'
    alt='1000x1000'
    placeholder={
      src: '...',
      alt: '...'
      ...imageTagAttributes
    }
    fallback={
      src: '...',
      alt: '...'
      ...imageTagAttributes
    }
  />
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/image/placeholder/demo).**