Search code examples
reactjsnpmmaterial-uicomponentsstepper

Importing only one component from Material UI


need a Stepper component from somewhere and the only adequate one I found was the MUI one. But my app uses react-bootstrap and I don't have it. In this post (Is it possible to install a package that contains only one component of Material-UI? ) the guys have given a package where you can import only the component you need, but for some reason I am required to do npm config set '@bit:registry' https://node.bit.dev which I am not okay with since I want everyone to be able to just do an npm install without additional configuration. Is there a workaround around that and is it actually okay to install the whole MUI kit and import just the Stepper ?


Solution

  • If you're using ES6 modules and a bundler that supports tree-shaking (webpack >= 2.x, parcel with a flag) you can safely use named imports and still get an optimised bundle size automatically.

    You can use path imports to avoid pulling in unused modules. For instance, use:

    import Stepper from '@material-ui/core/Stepper';
    

    instead of

    import { Stepper } from '@material-ui/core';
    

    Read more about minimizing bundle size here


    Please, let me know if it works or not )