# ghostkit/2.25.0/gutenberg/components/image-picker/index.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 2.25.0. 48 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/2.25.0/code/gutenberg/components/image-picker/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/2.25.0/raw/gutenberg/components/image-picker/index.js
- Modified: 2023-01-04T15:48:40+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/2.25.0/code/gutenberg/components/image-picker/index.js#L10-L20`.

```javascript
/**
 * External dependencies
 */
import classnames from 'classnames/dedupe';

/**
 * WordPress dependencies
 */
const { Component } = wp.element;

const { BaseControl } = wp.components;

/**
 * Component Class
 */
export default class ImagePicker extends Component {
  render() {
    const { value, options, onChange, label } = this.props;

    return (
      <BaseControl label={label} className="ghostkit-component-image-picker">
        {options.map((option) => (
          // eslint-disable-next-line react/button-has-type
          <button
            key={`image-pircker-${option.value}`}
            onClick={() => {
              onChange(option.value);
            }}
            className={classnames(
              'ghostkit-component-image-picker-item',
              value === option.value ? 'ghostkit-component-image-picker-item-active' : '',
              option.className
            )}
          >
            {option.image && typeof option.image === 'string' ? (
              <img src={option.image} alt={option.label || option.value} />
            ) : (
              ''
            )}
            {option.image && typeof option.image !== 'string' ? option.image : ''}
            {option.label ? <span>{option.label}</span> : ''}
          </button>
        ))}
      </BaseControl>
    );
  }
}

```