This project provides a collection of static components that can be easily integrated into any application.
-
CookiesBanner: Displays a banner to inform users about the use of cookies on the website.
- Properties:
-
cookieName
:string
(Default: 'lgpd') - Name of the cookie to check for acceptance. -
cookieValue
:boolean
(Default: true) - Value of the cookie to be set when the user accepts.
-
- Properties:
-
ProteinCalculator: Displays a banner to inform users about the use of cookies on the website.
- Properties:
-
email
:string
(Default: 'lgpd') - Name of the cookie to check for acceptance. -
api
:boolean
(Default: true) - Value of the cookie to be set when the user accepts.
-
- Properties:
You can install the package via yarn
or npm
:
yarn add @puravidaprime/ecommerce-components
or
npm i @puravidaprime/ecommerce-components
Alternatively, you can include the library in your HTML file using UNPKG:
<!-- If you are using Classic methods, you have to load React and ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script defer src="https://unpkg.com/@puravidaprime/ecommerce-components@{CURRENT-VERSION}/lib/@puravidaprime/ecommerce-components.js" />
This module exports by default this variable: puravidalabs
you can extract from puravidalabs
like this example:
<div id="cookies-banner-react"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const CookiesBanner = puravidalabs.CookiesBanner;
const container = document.getElementById('cookies-banner-react');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(CookiesBanner, { cookieName: 'lgpd', cookieValue: true }));
});
</script>
After installing the package, you can import the components into your project:
import { CookiesBanner } from '@puravidaprime/ecommerce-components';
export const App = () => {
return <CookiesBanner cookieName="lgpd" cookieValue={true} />
}
Now, you can use the imported components in your application.
Feel free to explore the documentation of each component for more details on usage and available properties.
We hope these components make it easier to develop your application and enhance the user experience! Happy coding!