open-index/open-npm huggingface dataset:
npm package: @comparaonline/co-banner
Description: ![npm](https://img.shields.io/npm/v/@comparaonline/co-banner.svg?style=flat-square)
Latest version: 1.7.2

## Bricks | ComparaOnline banner

![npm](https://img.shields.io/npm/v/@comparaonline/co-banner.svg?style=flat-square)

This library contains ComparaOnline banner.

### Installation

You can <b>install</b> it using:
<br/>

**npm**

```sh
npm install @comparaonline/co-banner
```

<br/>

**yarn**

```sh
yarn add @comparaonline/co-banner
```

<br />

<small><i>or the package manager of your choice</i></small>

---

<small>If you are not using a package manager you could simply include a script tag (`index.mjs` for ECMAScript module system or `index.js` for CommonJS)

```javascript
<script type="module" src="https://bricks-staging.comparaonline.com/co-banner/index.mjs"></script>
```

</small>

---

### Usage

Simple example, simple banner and with recommended offers:

```jsx
import { useEffect } from 'react';
import COBanner from '@comparaonline/co-banner/react';
import '@comparaonline/co-banner/css';
import './App.css';

export function App() {
  useEffect(() => {
    (async () => {
      const brick = new COBanner({});
      // Or if you want to display recommended offers
      // const brick = new COBanner({
      // recommended: { basePrice: '18000', fullPrice: '36000', premiumPrice: '68000' },
      // });
      brick.init('banner');
    })();
  }, []);

  return <section id="banner" />;
}
```

You can also simply use COBanner component:

```jsx
import { COBanner } from '@comparaonline/co-banner/react';

export function App() {
  return <COBanner {...coBannerConfig} />;
}
```

COBanner instance (or component) accepts a `configuration` object that has this structure:

```typescript
export type COBannerConfig = {
  company?: string;
  lang?: Language;
  styles?: Styles;
  recommended?: {
    basePrice: string;
    fullPrice: string;
    premiumPrice: string;
  };
  onClick?: MouseEventHandler<HTMLElement>;
  buttonText?: string;
  title?: ReactElement;
  className?: string;
  children?: ReactElement;
};
```

`styles` let you define the `theme`, also its `primaryColor`, while `lang` let you pick between `spanish`(es) and `portuguese`(pt). `recommended` let you set an object with base prices for different car insurance coverages.
`company` lets you set your business name, its useful if you'd like having the quote page with your logo.