How do I edit the files installed by NPM?

Question

Problem : So I'm using this npm package react-qr-scanner to scan QR codes in my PWA. Now this is a react based package. The react component(just an example) is like:

export function QrReader (props) {
    const videoPreviewStyle = {
         width : 300,
        //bunch of other styles
    }
    return (
        <>
          <Section style={ videoPreviewStyle }></Section>
        </>
    );
}

Okay so the 'Section' shown above has element-level css styles applied from the videoPreviewStyle object. Now what I wanna do is customize this section. Now the only way I thought is to actually make changes to the npm installed file(in node_modules folder). I tried it, but didn't work(I don't know why, so if you could answer why that'd be awesome). But I also read that whenever I reinstall the package, that would overwrite my changes, obviously(and I don't want that, so that is out of the question). So how exactly would I achieve this? Does anyone have a solution?

Use [patch-package](https://www.npmjs.com/package/patch-package). See [How to add custom script before build in react?](https://stackoverflow.com/a/66712147/2873538) — Ajeet Shah, Apr 18 '21 at 17:51

score 1 · Accepted Answer · answered Apr 18 '21 at 16:40

1

What you wanna do is fork the repo, just like the user above has said. Make the changes to it. And use it. To install just do

npm install [ github repo link ]

and there you have it. If you think, your changes could prove beneficial to others, or could significantly change the way the package works, consider creating pull requests. Cheers!

answered Apr 18 '21 at 16:40

Nike Lepz

485
2
12

thanks, the above answer was close to yours. But I wasn't sure how I'd use the package locally. – Apr 18 '21 at 16:41

score -1 · Answer 2 · answered Apr 18 '21 at 16:04

-1

If you want to extend react-qr-scanner you should fork it on github, you could import in locally to test and then publish it if you like, you could use as a private repo too

answered Apr 18 '21 at 16:04

Vinicius Katata

932
3
7

How do I edit the files installed by NPM?

2 Answers2