# @b2bfinance/products-embed

> products-embed React component

Latest version **5.0.0-alpha.6** (published 2019-08-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @b2bfinance/products-embed
pnpm add @b2bfinance/products-embed
yarn add @b2bfinance/products-embed
bun add @b2bfinance/products-embed
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0-alpha.6 |
| Published | 2019-08-02 |
| First published | 2019-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kyle Needham |
| Maintainers | bweston, kyle_needham |
| Keywords | b2bfinance, products embed |

## Links

- npm: https://www.npmjs.com/package/@b2bfinance/products-embed
- Repository: https://github.com/legalweb/products-embed
- Issues: https://github.com/legalweb/products-embed/issues
- npm.io page: https://npm.io/package/@b2bfinance/products-embed

## Dependencies (3)

- [clsx](https://npm.io/package/clsx.md) ^1.0.4
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [query-string](https://npm.io/package/query-string.md) ^6.8.1

## Recent versions

- 5.0.0-alpha.6 (latest) — 2019-08-02
- 5.0.0-alpha.5 — 2019-08-02
- 5.0.0-alpha.4 — 2019-08-01
- 5.0.0-alpha.3 — 2019-07-31
- 5.0.0-alpha.2 — 2019-07-31
- 5.0.0-alpha.1 — 2019-07-31

## README

# Products Embed

[![Storybook][storybook-badge]][storybook]
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Display a list of products.

## Installation

```sh
// with npm
npm install @b2bfinance/products-embed

// with yarn
yarn add @b2bfinance/products-embed
```

## Usage

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "@material-ui/styles";
import { EmbedWrapper, theme } from "@b2bfinance/products-embed";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <EmbedWrapper
        products={[]}
        productsLimit={10}
        filters={[]}
        cta={"Get Deal"}
        provider={null}
        onMoreDetails={null}
        onApply={null}
      />
    </ThemeProvider>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));
```

### Products

Products must be an array of objects matching the `Product` type below.

```typescript
type Product = {
  id: String;
  type: String;
  issuer: String;
  title: String;
  brand: String;
  product: String;
  description: String;
  highlighted: Boolean;
  labels: String[];
  columns: {
    label: String;
    value: String;
  }[];
  detailed: {
    title: String;
    rows: {
      label: String;
      value: String;
    }[];
  }[];
  feature_point: String;
  links: {
    apply: String;
    logo: String;
  };
  meta: {
    faded: Boolean;
    confirm: {
      description: String;
      heading: String;
    };
  };
};
```

### Filters

Filters must be an array of objects matching the `Filter` type below.

```typescript
type Filter = {
  title: String;
  key: String;
  multiChoice: Boolean;
  selected: String[];
  choices: {
    label: String;
    value: String;
  }[];
};
```

[storybook-badge]: https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg
[storybook]: https://storybook.js.org/
[build-badge]: https://img.shields.io/travis/legalweb/products-embed/master.png?style=flat-square
[build]: https://travis-ci.org/legalweb/products-embed
[npm-badge]: https://img.shields.io/npm/v/@b2bfinance/products-embed.png?style=flat-square
[npm]: https://www.npmjs.org/package/@b2bfinance/products-embed
[coveralls-badge]: https://img.shields.io/coveralls/legalweb/products-embed/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/legalweb/products-embed

---
_Source: https://npm.io/package/@b2bfinance/products-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._