Introduction
I published my first React UI Wrapper on NPM. You can find the package below:
https://www.npmjs.com/package/react-horizontal-scroll-grid
It is a simple Ui wrapper which helps you to create horizontal scroll view. I was inspired by Netflix, Amazon and other online video streaming apps to create this package. For Example consider the Netflix app, it has this sleek horizontal scroll with movie/TV show titles in it.
I bumped into many ups and downs while creating this package. I would like to share the same with everyone.
Approach
Step 1: CRA to rescue
Since I am a newbie to react so my first step for creating this package was to use create-react-app
. So for any react-developer this is the most common step:
npx create-react-app <project-name>
The above command created a ready-to-go react project within minutes. Later I realized this was the worst thing I did. Later on this in Pitfalls section.
Step 2: Writing code logic
The code logic behind the package is pretty straight forward. Before diving into code logic I am assuming that you guys have knowledge of . The HScrollGrid
is the UI Component name in our package that is wrapped around couple of <li>
HTML tags. Below is the code logic for HScrollGrid
:
class HScrollGrid extends React.Component{
constructor(props){
super(props);
this.hscrollRef = React.createRef();
}
componentDidMount(){
let n = this.hscrollRef.current ? this.hscrollRef.current.children.length : 0;
let gW = `${this.props.gridWidth}px`;
let gH = `${this.props.gridHeight}px`;
let cW = `${this.props.cardWidth}px`;
let cardBgColor = this.props.backgroundColor ? this.props.backgroundColor : 'transparent';
if(this.hscrollRef.current){
this.hscrollRef.current.style.setProperty('--total', n);
this.hscrollRef.current.style.setProperty('--gridWidth', gW);
this.hscrollRef.current.style.setProperty('--gridHeight', gH);
this.hscrollRef.current.style.setProperty('--cardWidth', cW);
this.hscrollRef.current.style.setProperty('--cBgCol', cardBgColor);
}
}
render(){
return(
<ul className="hscroll-grid" data-testid="test-ul" ref={this.hscrollRef}>
{this.props.children}
</ul>
);
}
}
I am using css-variables in the react component to pass in the values back to css properties. The advantage I have over here is, now I can dynamically pass the props of the component to css properties. Below is the css code for grid layout. Notice how I have used the css-variables pass down via the HScrollGrid
component as a prop:
ul.hscroll-grid{
width:var(--gridWidth);
height: var(--gridHeight);
display:grid;
grid-template-columns: repeat(var(--total), var(--cardWidth)) 10px;
grid-column-gap: 20px;
overflow-x:scroll;
overflow-y:hidden;
}
li{
width: var(--cardWidth);
height: var(--gridHeight);
background-color: var(--cBgCol);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
transition: 0.3s;
}
li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
Pitfalls
-
The first mistake I did was to choose CRA for creating an npm package. As I am aware, that a package should have least amount of dependencies on other packages. Over here since we have used CRA therefore it comes with a lot of pre-installed dependencies that are not required.
I faced some serious issues related to package broken error on different systems and environments. To solve this I googled a lot of things related to the keyworddependencies
anddev-dependencies
. Found the following two to be most relevant:- Remove additional(not required) dependencies manually which are found under
dependencies
key ofpackage.json
file. - To do:
npm run eject
I ended up with the former approach i.e. Remove additional dependencies. I did not use the latter approach because I ran into breaking the entire code :(
- Remove additional(not required) dependencies manually which are found under
-
Second mistake was choosing CRA:
npm run build
command minified all the code present in all component files and clubbed them together. I found this to be quite annoying because I just wanted to transpile all myHScrollGrid
component code into es5 so that it is support by majority of the browsers. And also I just wanted this single component file to be processed whenever I ranbuild
command. To solve this I had the following sub-approaches:
- Either I do
npm run eject
and modifywebpack.config.js
. OR - I edit the
build
command to make use ofbabel-cli
command to transpile my component files into onelib
folder.
I choose the latter option because it was less time consuming. I know this is a dirty fix and not at all recommended but I was too excited to roll out my first NPM Package :)
- Either I do
Publishing to NPM
After all the dirty fixes and chaos I manged to pull off the package. I tested it first locally and then published it on NPM.
Publishing a package on NPM was easy. You need to get yourself registered on npm. Post that you will need to login via CLI in your local system:
npm login
After publishing all your commits to your repository you can simply enter following command to publish the package on NPM:
npm publish
Final thoughts
It was an awesome experience in publishing the first NPM public package. I am planning to focus on building more packges.
This journey taught me lots of new things such as: CRA-boiler plate code, cons of using CRA, creating production grade code, understanding and editing various config files such as: webpack.config.js, package.json etc.
Feel free to contact me about the problems. I will try to help as much as I can 😉
Top comments (0)