# aws-service-catalog-react-components

> React Components for AWS Service Catalog

Latest version **1.1.0** (published 2020-03-19) · MIT No Attribution license · 0 weekly downloads

## Install

```sh
npm install aws-service-catalog-react-components
pnpm add aws-service-catalog-react-components
yarn add aws-service-catalog-react-components
bun add aws-service-catalog-react-components
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-03-19 |
| First published | 2018-08-11 |
| Weekly downloads | 0 |
| License | MIT No Attribution |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 9.1 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 25 |
| Author | Fernando Dingler |
| Maintainers | ferdingler |

## Links

- npm: https://www.npmjs.com/package/aws-service-catalog-react-components
- Repository: https://github.com/awslabs/aws-service-catalog-react-components
- Homepage: https://github.com/awslabs/aws-service-catalog-react-components#readme
- Issues: https://github.com/awslabs/aws-service-catalog-react-components/issues
- npm.io page: https://npm.io/package/aws-service-catalog-react-components

## Dependencies (6)

- [uuid](https://npm.io/package/uuid.md) ^3.3.0
- [react](https://npm.io/package/react.md) ^16.0.0
- [aws-sdk](https://npm.io/package/aws-sdk.md) ^2.264.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^0.32.1

## Recent versions

- 1.1.0 (latest) — 2020-03-19
- 1.0.2 — 2018-08-11
- 1.0.1 — 2018-08-11
- 1.0.0 — 2018-08-11

## README

## AWS Service Catalog React Components

React components to display, provision and terminate products from an AWS Service Catalog.

## License Summary

This sample code is made available under a modified MIT license. See the LICENSE file.

## Why is this project useful?
Although Service Catalog provides a fully functional user interface for end-users already, this project is an alternative way of bringing Service Catalog into your own React website without giving your end-users access to the AWS Console. You can then customize and enhance this UI however you like.

## Installation

```
npm install --save aws-service-catalog-react-components
```

## Usage

The components require AWS credentials with permissions to interact with Service Catalog. We suggest to use
AWS Amplify with Cognito to provide credentials and a login screen for your users to authenticate.

```javascript
import { Auth } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';
import {
  SCProducts,
  SCProvisionModal,
  SCProvisionedProducts,
  SCProvisionedDetailsModal,
} from "aws-service-catalog-react-components";

class App extends Component {
  componentDidMount() {
    Auth.currentCredentials().then(credentials => {
      this.setState({ credentials: Auth.essentialCredentials(credentials) });
    });
  }

  onLaunchClick() {
    console.log('User clicked Launch button');
  }

  render() {
    return() {
        <SCProducts
          credentials={this.state.credentials}
          onLaunchClick={this.onLaunchClick}
        />
    }
  }
}

export default withAuthenticator(App);
```

For more examples of usage please see the `demo` folder in this repository.

## Demo - Display Provision Parameters
Based on the cloudformation template parameters, the UI loads a form with them for the user to fill in.

![Product CloudFormation Parameters](./docs/react-servicecatalog-launch.gif)

## Demo - Provision a Product

![Launch a Product](./docs/react-servicecatalog-launch2.gif)

## Demo - View Provisioned Product Details
Once a product is provisioned, you can check its CloudFormation output details.

![Provisioned Product Details](./docs/react-service-details.gif)

---
_Source: https://npm.io/package/aws-service-catalog-react-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._