Build and Publish a Custom React Hook Package on npm

if you've ever wondered how to deploy your own package to mpm stay right here because in this episode we are going to build our own custom react hook and deploy it to mpm so it's available for everyone to use by the end of this video [Music] so if you haven't got an npm account already make sure you head over to mpm i'll put a link in the description below to the sign up link and make sure you have an account so we're going to need your login to actually publish this later on in the episode so make sure you have that so let's get started on creating our app to test that our hooks actually work i'm going to build our package inside a create react app sample so let's generate that now and change into whatever directory you want this in so i'm in my projects folder and mpx create react app and i'll call this sample this will take a moment and i'll let it do its thing so mpx just basically lets us run the create react app commands without having to install anything now that that's installed we'll just zoom out a little bit so you can see this but you can see that it says cd into sample so we're going to do that and hit yarn start so cd sample and yarn start well actually what i'm going to do before i hit that i'm going to start this inside the code editor so we'll set code dot to open the code or your default code editor in the current directory so i have visual studio code so if i hit that we open up our code editor now if i jump back over i am going to hit yarn start in here yarn start and this will okay so i have something running on port 3000 already so i'll just say yes i want to use a different port so it's starting my development server and as you can see it just pops open our boilerplate create react app let's jump back into the code and now what we're going to do is inside our source i am going to make a new file or a new folder a new folder called hooks and this is where i'm going to put my hooks i am obviously going to just make a small a simple sample in this but we'll have the structure so you could have multiple packages in here to export multiple hooks in case you wanted a few inside your mpm library and inside here i'm going to make a new file and this one is going to be called use kodu toggle dot js so inside here i'm going to make a simple toggle hook and that's just so we don't get bogged down in the details of custom hooks so first thing we're going to do is import react from react and i know i'm going to need to use state to change the state so let's add in use state here as well now i'm going to define my hook so we'll say use kodu toggle and if you've noticed in the names here i'm going to zoom in a little bit you'll see that i have use minus kodu minus toggle so it's a standard or a pattern you will see in a lot of places in packages for custom hooks that we name our files use minus whatever we're doing and then use the standard naming for our actual variables or our hooks that we're exporting so as you can see here i'm using this kind of minus here or this kebab casing and then i am using this camel casing here to actually define my hook you can do this and name this whatever you like it doesn't matter i'm just pointing out why i've chosen to do it this way so cons use code you toggle is going to be a function and it is going to return some hooks so the only difference between a normal component and a custom hook component is instead of returning jsx we're going to return some logic so i'm going to give this some logic by saying const is active and we will say set as active and we'll say equals to use state and i would like to be able to pass in a default state to this so i'm going to say active is going to be equal to false by default but if we pass in something we could override that so say maybe somebody wants this toggle to be on by default so let's let them pass in a parameter here of active and if they pass in nothing it'll default to false so what i'm going to do then is just to make sure we can see it in the console is console.log active and i am going to wrap this in curly brackets it's something i like to do because it is the equivalent of saying active active and that will just easily label my stuff in the console so i can see it a little bit easier to make sure i know where the true or false is coming from now let's return these hooks and as you can see i already had an empty array here so i'm just going to copy these up here and now i'm going to be able to return them the last thing we have to do is export default use kodu toggle excellent now let's wire it up to our app to make sure it's working so inside of our index.js oh actually i'm going to go into the app.js where we have all our actual bits and pieces or the stuff that's on the screen i'm going to create a button in here that i'm going to use to toggle stuff then add in a state here so we'll just say is active and then we are going to look for a value of is is on we'll say because i don't want to name the exact same things just as an example so we need this will obviously break because we have no reference to is on at the moment so let's import our custom hook to add some logic to this so import use kodu toggle from hooks and then our use kodu toggle and we are going to then use this in here we'll say const is on and that refers to this is active so because we're destructuring from an array we just give it the first parameter and oh run file again and then we will say set is on because that's where we set our setter for this so this is going to be equal to use kodu toggle and we'll pass it in nothing for the moment just to make sure that the default behavior is working we will want to change this on click so if i go down here i'm going to add an on click inside here we'll say set is on is equal to is on we need to return it if if you're referring to the prop itself or the state itself you pass it in as a function so we'll have the oh we'll have the old state and then we're going to return not is on okay so a little bit of boilerplate there but nothing too complex we're just setting this on and off so this should return the is on or the true or false values as a string in here then as well so let's jump back over to our preview rerun re-earn is not defined so i've spelt return wrong so if i jump back over to my use kodu toggle i have return these hooks now react defined and never used let's ignore that and now we have our button and if we click it we can see it toggles so our hook itself is not too complicated and i didn't want to make that the complicated part of this because this is more about how do i now get this onto npm so let's jump back into the code and what i'm going to do is if you've ever initiated uh a project before with npm you have to say npm init so if i open up my terminal and i show you where i am i am actually going to want to ship this the contents of this folder so i can use them as a package so if i was using multiple files here i would probably want an entry point so i might make an index.js where i will import all of my hooks and you know just be able to import from a single file but for this instance we're just going to be uploading a single hook but if you had multiple hooks in here you'd probably just want to give a single export file so people don't have to go into directories to find your hooks so what i'm going to do is change directory into hooks uh no search file directory so my hooks is actually in my source so cd into source and then cd into hooks so i might be able to bump this up a little bit so you can see this what i'm going to do then is we want to initiate this as its own little project so if there was any dependencies for this to run so what i'm going to do is mpm init package name is hooks i'm going to call this use kodu toggle for our package name and this is what it will be deployed to on npm as so you would npm install use code you toggle after we publish this so that naming is kind of important i'm going to set the version to be 1.0 or the default there and i'm not going to give a description right now the entry point is use code you toggle but if you had multiple exports you probably want your index.js with your multiple exports in there pointing it out i don't have any tests because i'm not going to waste my time on it for this i have no git repository please do yourself a favor if you are making these packages for the web put these up on git as well because i always recommend to people never install something on your computer that you can't see the source code so if you can't see the source code for it you probably shouldn't be installing it in case it's malicious keywords i'm not going to worry about it right now and the other is not going to matter right now either so is this fine yes great so inside of our folder here now we have this use kodu toggle so now looking at this you'll see we have no dependencies and we know that this won't work by itself because it will need react and react dom to actually do anything so we might want to add those as dependencies to our project or to our package that we're going to ship so everything inside this folder is what we're actually going to deploy so we want to let it know what dependencies it needs so i'm going to npm install react and react dom inside here you'll see dependencies but we don't want to have the dependencies in two places because this is a thing we call a peer dependency of this package so it expects that you have these things already installed when you are importing this library so it's a peer dependency is what it's called so we can actually change this to be a peer dependency here and that will just mean that we don't need to install it but we do need to have it available to us so it'll keep our package a little bit smaller we're going to just delete this to make sure we have everything working as expected mpm install perfect and as you can see noting installs with our peer dependencies so it's just going to warn us that we need this if we pull it in or if we don't have it so now that we have this all set up and we have our entry point our use code toggle that's going to be the default if somebody starts using our package what we're going to do is finally ship this so we just have to first npm login you'll put in your username the next thing you're going to put in is your password and i'm going to fetch mine from my password manager and something to be aware of when you're typing in your password here is just be careful because you can't actually see how many characters you're typing it just stays blank so as i'm typing my password here you can't actually see it then it will prompt you to add your email and this is going to be public and since my email is available on my business site publicly anyway i don't think this is going to make much of a difference i have an incorrect password so i had to jump off there i actually forgot my password i had not saved it to my keychain so i had to reset it so now i can log in as you can see i'm logged in as knowledge omar and what i can do is just make sure i am in the right directory and i am i have my package.json and i have my hook so all we have to do then is once we have our name decided and make sure that you have what you want and i'm thinking nobody will have used kodu toggle taken so you can check in npm if you're worried about what's been taken and we can just say npm publish from that directory and we'll let that run for a second i'll jump back in when it's finished publishing okay so now we have just deployed use minus kodu minus toggle at 1.0.0 so we have version one of our toggle and what you will get when you've done this after a minute or two usually is an email from mpm confirming that it has been released so let me just check my emails here real quick you can ignore the unopened emails i'm clearly very good at getting back to emails they're usually just github notifications in fairness so it took about 60 seconds and i received this email saying that i successfully published the package now if i jump back over to my profile or my mpm profile i should see it as well so on my profile if i refresh this now we have a package and it's publicly available let's have a look and what we have here it's just going to jump in and we have our package so as you can see if you have a github link or a description or any of that it will all be linked here this is where your keywords would be so if you wanted to be found by people you'd make sure you have keywords now let's make sure it works as a package so i'm going to jump back in and replace our hook with our new npm use kodu toggle so back in our project what i am going to do is change back out of the directory i was in so we are back in there we're in source so we don't want to be there so we'll see the one further and i am back in the root and i want to add our use kodu toggle and we can use that very easily now we can just npm install use code you toggle give this a second to install took a little while because i had used yarn initially with the setup by default for uh to create react app as it was shown in the docs but i'm using npm for this to not confuse things now you could yarn add this package and it will be available as well if you want to just keep using yarn so i have my package.lock now and i have my use kodu toggle is in here so if i jump back into my app.js instead of importing use code toggle from there i am going to import it from look at this i i saved like five or six characters save it and hopefully this works now so let's jump over to the code or the preview again now let's test it out and if we click it we still have things working amazing and if we go back over remember i said that it takes a default so let's make sure it'll default to true as well if i do that so i save and it should be refreshed and the default is true here now let's jump back over to the code i just want to talk about semantic versioning and what those numbers mean when we were releasing versions for our package so in our package you'll see i'm going to close this over to save some room here and zoom in a bit in here you'll see we have three numbers and they stand for major minor and patch so a major release would be a breaking change so if you change your api or if somebody upgraded your package and suddenly their stuff breaks this is usually a good indicator that you should bump this first number a minor is usually added when you've maybe added a feature but it doesn't interfere with existing things so it's safe to update but it uh like it might add features but it won't break anything so use that if you know it's a safe thing to update so if we added say a third setter in our toggle feature that won't break anything it'll just be a feature that's added and then the last one is patch so say what we want to do is get rid of that console log because it really doesn't do anything for us we that's a bug that it wasn't meant to be in it to begin with we might just want to bump that up to 1.0.1 and go back over to our files and because i wasn't using it at all we'll just save that and we could go over then back into our terminal let's cd back into our source and hooks and we can just run mpm publish because we'll still be logged in oh actually i didn't save the file that would have been meaning we're doing nothing so let's npm publish that again and we'll have just updated a little patch version so now we'll see that we've just added a patch version to fix that little bug so as you can see it's not too complicated to actually do these things yourself i hope you found this video useful and if you did i would love it if you hit the subscribe button and the little notification bell to make sure you get updated when the next video is out and until next time happy coding you

Channel: Codú Community

Views: 5,901

Keywords: npm, npm tutorial, npm package, npm package tutorial, npm publish, npm publish tutorial, npm publish package, npm module, how to write an npm script, how to write an npm package, writing an npm package, react package, react npm, custom hook npm, npm packages, npm tutorial for beginners, how to create npm package, npmjs, how to npm packages, npm install, npm package creation, npm package publish, publish npm package locally, publish npm package, npm for beginners

Id: mWCrzUGkGKQ

Length: 22min 44sec (1364 seconds)

Published: Thu Jul 23 2020