Il componente BlocksRenderer per Strapi e link con target _blank

Quando vi trovate ad utilizzare un Rich text (Blocks) di Strapi sarete sicuramente molto agili e comodi nello scrivere testo e ad aggiungere link però questi ultimi hanno la peculiarità (nel momento in cui viene scritto questo breve how-to) di essere semplici link senza attributi quando portati sul frontend dal componente react BlockRenderer. Ma non preoccupatevi, sono possibili dei semplice workaround come questo:

<BlocksRenderer 
   content={post.data[0].attributes.TextPost}
   blocks={{
     link: ({ children, url }) => {
         if (url.startsWith("https://demowa")) {
            return (
               <Link href={url} title={children[0].props.text}>
               {children} 
               </Link> 
            );
         } else {
            return (
               <Link href={url} 
                target="_blank" 
                rel="noopener" 
                title={children[0].props.text}>
                {children}
                </Link>
            );
         }
     },
   }} 
/>      

Come potete vedere andando a modellare il prop "blocks" è possibile un override del contenuto, nel nostro caso i blocchi di tipo Link. Quando l'url non inizia con la stringa https://demowa sostituiremo il blocco aggiungendo target,rel e title. Anche nella prima condizione abbiamo aggiunto un attributo title che aiuterà l'aspetto SEO della web app su cui state lavorando. Questo non risolve i vostri problemi? non esitate a contattare DemoWA la nostra Web Agency a Milano.