Question 243864 in React native Question posted in
The official React Native documentation can be found here.

React native – Adding Custom Component to Docusaurus

I have a quite large angular component exported as custom component, which I want to load as a demo into my docusaurus documentations It consists of several bundles and other resources all saved in node_modules/mycomponent/dist. The component has an url attributes, which I have to set so it knows where to load all the data from.

For the prototype I just copied all the content from node_modules/mycomponent/dist into static/mycomponent, declared the component in the JSX name as an IntrinsicElement to use it with react, just added it into a mdx file for my docs, set the url attribute to mycomponent so it gets all it’s assets and added the stylesheets and scripts which are necessary to load everything in the docusaurus.config.js in the stylesheets and scripts section so they will be loaded.

Everything was working, but it can’t stay like that. For the final solution I especially don’t want to copy the files of the custom component into the static directory (Problem A) as they are a lot of files (>10mb), which change regularly (every 3 weeks). My secondary goal (Problem B) would be to not load the necessary scripts and stylesheets for the custom components on all pages of the documentation, but only on the one, where the demo of the custom page will be shown.

Problem A:

I tried to look out docusaurus plugins and already existing solutions, but they don’t really seem to solve my use case to serve these files in an easy way at dev and prod time. You can use postbuild to copy files, but this for example won’t work at dev time. I also looked into trying to use copy-webpack-plugin so maybe webpack can handle this, but I couldn’t get it to work.

I really expected docusaurus to somehow give a way to easily add assets of dependencies, but I really spent a lot of time without a solution. Any help would be appreciated as this probably would kill the feature.

Problem B:

I researched on how to scope the scripts to the demo page, but there seems to be native way in docusaurus to do so. docusaurus.config.js, injectHTMLTags possible plugin solutions will add it to all pages. Loading add runtime by manually script tags, using @docusaurus/Head or useScript also won’t work since all of this will happen after page load and won’t execute the scripts, so the web component will not work.

I expected docusaurus to provide an easier way to add scripts and stylesheets to just one documentation page. Problem A is more important and if I have to load everything on all pages it will be probably okay due to caching, but it’s still not sitting well with me.

Any help or idea would be appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For problem A adding following webpack plugin to copy the files to the build directory seems to solve the trick in dev and build mode:

      plugins:[
    () => ({
      name: 'docusaurus mycompontentloader',
      configureWebpack: () => ({
        name: 'webpack mycompontent loader',
        plugins: [
          new CopyWebpackPlugin({
            patterns: [
              {
                from: path.join(__dirname, './node_modules/mycomponent/dist/'),
                to: 'mycomponent'
              }
            ]
          })
        ]
      })
    })
  ],

    I'm still testing the approach, but atleast I get the files via http.


  2. 0

    For problem A:

    Have you considered adding a custom script and invoking it in your package.json on both start and build?

    "copy-component": "node copy-component.mjs",
"start": "yarn copy-component && docusaurus start",
"build": "yarn copy-component && docusaurus build",

    Problem B:

    Maybe you can load the script in a useEffect in your custom React component? That would load it only on pages where the React component is mounted.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search