@comparaonline/co-banner
v1.7.2
Published
![npm](https://img.shields.io/npm/v/@comparaonline/co-banner.svg?style=flat-square)
Downloads
14
Maintainers
Keywords
Readme
Bricks | ComparaOnline banner
This library contains ComparaOnline banner.
Installation
You can install it using:
npm
npm install @comparaonline/co-banner
yarn
yarn add @comparaonline/co-banner
or the package manager of your choice
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)
<script type="module" src="https://bricks-staging.comparaonline.com/co-banner/index.mjs"></script>
Usage
Simple example, simple banner and with recommended offers:
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:
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:
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.