How to use Crayons in a React app

I tried to import Crayons following the instructions , adding by npm install and by cdn link, but I can not import the scripts in the index.html because each time I run the app this file is rebuilded. Including the scripts in an .js file like in App.js the styles are not applied.

4 Likes

I managed to use the library adding at the beginning of the App component in a useEffect call, like this:

const scriptCrayons = document.createElement( "script" );
scriptCrayons.src =
     "https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.js";
scriptCrayons.defer = true;
document.head.appendChild( scriptCrayons );

As was suggested by @velmurugan in another topic

6 Likes