• Español

Nästa Coach React Integration

1. Create a new component loading the microfront:

   import React, { useEffect } from 'react';
   
   const loadScript = (src) => {
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.src = src;
       script.async = true;
       script.onload = resolve;
       script.onerror = reject;
       document.body.appendChild(script);
     });
   };
   
   const RecyclingComponent = () => {
     const token = '<your-token>'
     const clientId = '<your-client-id>'
     const language = '' /* If you leave it empty it's the system default language, but you can set with es for spanish, en for english and va for valencian */
   
     useEffect(() => {
       const scriptUrl = 'https://recycling.nastaeco.com/recycling.umd.js';
   
       loadScript(scriptUrl)
         .then(() => {
           console.log('Microfrontend script loaded successfully');
         })
         .catch((error) => {
           console.error('Error loading microfrontend script:', error);
         });
     }, []);
   
     return (
       <div>
         <recycling-app token={token} client-id={clientId} language={language}/>
       </div>
     );
   };
   
   export default RecyclingComponent;
   

   Remember to change the values of your-token to your token and your-client-id to your client id.

2. Use your new component:

   import React from 'react';
   import RecyclingComponent from './RecyclingComponent';
   
   const App = () => {
     return (
       <div>
         <RecyclingComponent />
       </div>
     );
   };
   
   export default App;
   

3. Put the microfront styles in your css :root selector if you want to customize it:

   /* Colors */
   --nasta-main: #4b858e; /* These hexadecimal values are the default values */
   --nasta-mainActive: #2c4e54;
   --nasta-mainDisabled: #9db8bc;
   --nasta-secondary: #a3d5cd;
   --nasta-secondaryDark: #9ac6bf;
   --nasta-secondaryMiddle: #c8e7e2;
   --nasta-secondaryLight: #e8f6f3;
   --nasta-secondarySuperDark: #7baaa3;
   
   /* Font */
   --nasta-font: 'Montserrat', sans-serif;
   
   /* Sizing */
   --nasta-microMaxWidth: 420px;
   --nasta-microHeight: 500px;