# intraactive-framework-spfx-imagepicker

> SPFx ImagePicker written in react

Latest version **1.0.30** (published 2019-01-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install intraactive-framework-spfx-imagepicker
pnpm add intraactive-framework-spfx-imagepicker
yarn add intraactive-framework-spfx-imagepicker
bun add intraactive-framework-spfx-imagepicker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.30 |
| Published | 2019-01-10 |
| First published | 2018-06-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | intraactive team |
| Maintainers | jonasbrink, nielsbrinch_proactive, smukked |
| Keywords | color picker, hex |

## Links

- npm: https://www.npmjs.com/package/intraactive-framework-spfx-imagepicker
- npm.io page: https://npm.io/package/intraactive-framework-spfx-imagepicker

## Dependencies (9)

- [react](https://npm.io/package/react.md) 15.6.2
- [react-dom](https://npm.io/package/react-dom.md) 15.6.2
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) 15.5.6
- [@types/webpack-env](https://npm.io/package/@types/webpack-env.md) >=1.12.1 <1.14.0
- [@microsoft/sp-core-library](https://npm.io/package/@microsoft/sp-core-library.md) ~1.4.0
- [@microsoft/sp-webpart-base](https://npm.io/package/@microsoft/sp-webpart-base.md) ~1.4.0
- [@microsoft/sp-lodash-subset](https://npm.io/package/@microsoft/sp-lodash-subset.md) ~1.4.0
- [@microsoft/sp-office-ui-fabric-core](https://npm.io/package/@microsoft/sp-office-ui-fabric-core.md) ~1.4.0
- [intraactive-framework-utilityfunctions](https://npm.io/package/intraactive-framework-utilityfunctions.md) ^1.0.15

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 1.0.30 (latest) — 2019-01-10
- 1.0.29 — 2018-10-05
- 1.0.28 — 2018-10-05
- 1.0.27 — 2018-10-05
- 1.0.26 — 2018-10-05
- 1.0.24 — 2018-10-05
- 1.0.23 — 2018-06-28
- 1.0.22 — 2018-06-28
- 1.0.20 — 2018-06-12
- 1.0.19 — 2018-06-12
- 1.0.18 — 2018-06-12
- 1.0.17 — 2018-06-12
- 1.0.16 — 2018-06-12
- 1.0.15 — 2018-06-12
- 1.0.14 — 2018-06-12
- … 14 more at https://npm.io/package/intraactive-framework-spfx-imagepicker/versions

## README

# IntraActive Framework - SPFx Image Picker
IntraActive Framework's "Image Picker" package is a SPFx component used to upload/select images and to a SharePoint list and retur the URL.

## Installation

```
`$ npm install intraactive-framework-spfx-imagepicker
```

## Import

```
import IAImagePicker from 'intraactive-framework-spfx-imagepicker'
```

## Usage

```
<IAImagePicker 
  label="[YOUR_TEXT]" 
  inputFieldPlaceholderText="[YOUR_TEXT]" 
  uploadButtonLabel="[YOUR_TEXT]"
  selectButtonLabel="[YOUR_TEXT]" 
  imageListTitle="[YOUR_LIST_TITLE]" 
  onChange={(url: string) => console.log(url)} 
  defaultImageUrl="[YOUR_TEXT]" 
  spService={[JSOM_SERVICE]}
/>
```

## Example

```
import * as React from 'react';
import { IDesignSettingsProps } from './IDesignSettingsProps';
import JSOMListService from 'intraactive-framework-jsomservice';

export interface IDesignSettingsState {
  spService: JSOMListService;
}

export default class DesignSettings extends React.Component<IDesignSettingsProps, IDesignSettingsState> {

  constructor(props: IDesignSettingsProps) {
    super(props);
    this.state = {
      spService: props.serviceScope.consume(JSOMListService.serviceKey)
    };
  }

  public render(): React.ReactElement<IDesignSettingsProps> {
    return (
      <IAImagePicker 
        label="Indsæt et logo" 
        inputFieldPlaceholderText="Indsæt billedlink" 
        uploadButtonLabel="Upload" 
        selectButtonLabel="Select" 
        imageListTitle="Infoscreen Assets" 
        onChange={(url: string) => console.log(url)} 
        defaultImageUrl="" 
        spService={this.state.spService}
      />
    );
  }
}
```

---
_Source: https://npm.io/package/intraactive-framework-spfx-imagepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._