How I Wrote My First React Library

Written by: Ben Hur Martins Carvalho, Agile Software Engineer, TribalScale

📫 Subscribe to receive our content here.

💬 Have any questions about React Library? Click here to chat with one of our experts!

Photo by Lautaro Andreani on Unsplash

Developers are constantly stepping into architectural issues, bugs, and solutions for which libraries are a great help. If there is no library available, then you can help the dev community by publishing a library or even sending a pull request to contribute to an open project.

Surprisingly it was way easier than I expected, and here are the three steps to make it happen:

• Find the problem
• Write your solution
• Publish

The problem

Reusing components in software development is not new or react exclusive, it is important and a common/good practice. I tend to notice that sometimes in big applications when we reuse the same component on multiple screens, the level of complexity of that component grows as well, and more and more props are necessary for some level of customization for that specific screen.

This architecture dilemma is not visible to the end-user. It will not impact the user experience in the end, but can save developers a lot of time when they need to add new props and refactor the code that uses certain components. If they choose to create a new component, there is a chance that part of the old components will need a refactor as well.

The solution

My proposed solution is quite simple: we will create a React Context Provider to get all props in one place. These props will be accessible by hooks anywhere in the app passing only the id.

The approach is a reducer-based solution within a context provider, easy to implement and focused on static props.

Props Manager Provider

Using the useReducer from React hooks, we start with the props values getting our current state and the option to update it by setProps. My values here are three functions and the state that will be available for the whole application. The functions are:

• getProps: return the props object given an id.
• resetProps: can reset the props to an empty object.
• updateProps: can add/update the props values in the running app.

Props Reducer

It is a very simple solution, update or return an empty object, basically.

Usage example

I tried to make it the most simple possible.

Install the package.

yarn add react-props-manager

Create an object with all props that you want to share through your project.

Wrap your app with the provider passing your props.

Easily use your props anywhere in your application.

Publishing

In order to publish, first you will need a npm account, access the npm website and create yours.

Log in with your npm account on your terminal.

npm login

Then, publish it.

npm publish --access public

Make sure to test it locally before sending it.

Conclusions

The process of learning something new and contributing to the dev community is one of the things that motivates me and makes me love being a developer. I hope this blog inspires you to write your own libraries.

Feel free to contribute and improve react-props-manager library, it is an open project.

Ben is an Agile Software Engineer here at TribalScale and is based in Brazil. He is a front-end developer and his stack today is React Native and ReactJS, before TribalScale he worked as a full stack developer for 8 years. Outside of work he has multiple hobbies, a recent one is leather craft, and loves spending time with his 1 year old son.

TribalScale is a global innovation firm that helps enterprises adapt and thrive in the digital era. We transform teams and processes, build best-in-class digital products, and create disruptive startups. Learn more about us on our website. Connect with us on Twitter, LinkedIn & Facebook!