How to use a component inside NProgress template

31 Views Asked by At

I want to use NProgress module and add custom component inside template in next.js app. Originally I can set custom NProgress template by using below code:

NProgress.configure({
  template: "<div class='....'>...</div>"
});

Instead I want to do something like that:

NProgress.configure({
  template: `<div class='....'>${<MyCustomComponent />}</div>`
});

My custom component (<MyCustomComponent />) is regular React component or for example Material UI component, eg. <CircularProgress />.

Using <MyCustomComponent /> inside template property as has been shown above will output [object Object].

I know I can disable default spinner by setting showSpinner to false and use custom state to display own component but maybe there is a better solution.

0

There are 0 best solutions below