Forem: Damir Drempetić

Create and publish your own React library

Damir Drempetić — Mon, 20 Sep 2021 07:28:27 +0000

Chapter #1 Create your library with create-react-library
Chapter #2 Publishing a npm package created with create-react-library

In software development in general, we always tend to reuse some code and extract parts of it that we need in multiple places. Front-end development nor React are not an exception. Therefore, sometimes we want to create React libraries as well. When talking about React, library or package could be anything, e.g. one component, a whole set of them, they could be just UI parts but also include some logic that is repeated.

Chapter #1 Create your library with create-react-library

One very quick and simple way of creating React library is by using create-react-library. We all know about create-react-app and let’s say create-react-library is the same thing for creating libraries.

To create a new library simply run:

npx create-react-library <LIBRARY_NAME>

We will call ours bornfight-react-library so the command would be:

npx create-react-library bornfight-react-library

Take attention to replace this library name with yours in any occurrence in this post.

You will be then asked for a few options as displayed on the image. It’s important to select:

typescript as a template
yarn as a package manager
rest can be changed easily later in package.json if necessary.

That’s it, you’ve created your own React library.

Run and build your library

Executing in the project root directory:

yarn start

Develop, test and showcase your work

Option A) Using CRA

There is CRA in the example directory. It is also started by executing:

cd example
yarn start

Option B) Using Storybook

If you prefer using Storybook you can install it additionally to CRA:

cd example
npx sb init

This means you will need to write your stories separately from components.

Stories will be located in the example dir, while you write your components in the project root. Otherwise, if you want to install Storybook in the project root, it breaks the CRA and therefore it is not suggested.

Chapter #2 Publishing a npm package created with create-react-library

Publishing React library means publishing node package. You can publish node packages either to a well-known public registry like npmjs.com or any other registry e.g. Github Packages.

Simple scenario publishing usually includes executing:

npm login
npm publish

More about publishing can be found in the rest of the chapter.

I) Publishing as a public package to npm.js registry

1) Ensure you provided correct name and version in package.json

If you want to publish it under your npm organisation (here @bornfight), your changes should look like:

-  "name": "bornfight-react-library",
-  "version": "1.0.0",

+  "name": "@bornfight/bornfight-react-library",
+  "version": "0.0.1",

Otherwise, if you want to publish it under your account just ignore this step and keep the package name without an organization prefix.

2) Login to your npm account

npm login

You will be then prompted to enter your username, password and email.

3) Publish package

npm publish --access public

If you aren't publishing it under organization, --access public flag isn't necessary as it will be default option.

II) Publishing as a private package to Github Packages

1) Ensure you provided correct name, version and repository, e.g.

"name": "@bornfight/bornfight-react-library",
"version": "0.0.1",
"repository": "https://github.com/bornfight/bornfight-react-library",

2) Update publish config to point to Github Packages registry

  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }

3) Login to your Github

npm login

You will be then prompted to enter your username, password and email.

Use Github personal access token as password.

4) Publish package

npm publish

Used resources and more information 📚

Your thoughts? 🤔

Did you already create some React libraries or npm packages on your own?
Which tools did you use?
Did you ever tried TSDX?

Style your frontend with an engineering flavour by using JSS

Damir Drempetić — Mon, 10 May 2021 09:19:20 +0000

Choosing between numerous options for styling your app could be a project in and of itself. 🤯

I've tried several styling solutions and approaches on frontend like:

Vanilla CSS
CSS extensions like Sass or Less
CSS modules (and Sass)

Projects which used them were written either with Vanilla JS or with some modern JavaScript frameworks like AngularJS, Angular 4, React ⚛️ or even React Native.

After all I have a huge favourite regarding styling options world which is not mentioned above. I would vote for it on new project anytime (sorry, there are local elections 🗳️ soon here in Croatia).

To finally get closer to the point, I like to write my styles just as rest of the app. In JavaScript. Which means I use the same programming language and the same syntax both for logic and for styles. This is really cool, but it's not the main motive behind it. It's because I find JavaScript much more powerful 💪 and capable than CSS.

JavaScript brings more of the engineering flavour into the app styling process. And it's possible with CSS-in-JS solutions, or shorter JSS.

I used JSS for the first time while I was working on projects built with Material UI. In their docs, you can find out why they use such approach after abandoning Less and custom solution inline-styles. Actually they did some pretty interesting comparison 📊 when choosing styling solution.

I've mentioned engineering flavour so let's show some examples of what I thought.

Variables

You can simply keep any style in a variable.

const COLOR_PRIMARY = "black";
const COLOR_SECONDARY = "#f0f0f0";

Also group them into a JS object.

baseTitle: {
    fontSize: 24,
    fontWeight: 600,
    color: COLOR_PRIMARY
}

You could think now: nothing special, I can do that with extended CSS too. Be patient... 😃

Spreading, default properties and overriding

Let's say we want to extend this basic title for some other use.

sectionTitle:  {
  ...baseTitle,
  //override font weight from base title
  fontWeight: 800, 
  //extend base title
  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  fontStyle: 'italic',
}

Notice that you don't need to learn any new syntax, you actually write CSS but you just use camelCase instead of the kebab-case: font-size ➡️ fontSize. And have JS power on top of it.

Themes

Then, you could also keep all your reusable styles in one place and build your whole theme - which is simply JS object.

const theme = {
  backgroundColor: COLOR_PRIMARY,
  color: COLOR_SECONDARY,
  ...
};

That theme could be considered a config file but for styles 💅. Use Material UI theme for inspiration. From breakpoints, typography to colour palette and spacings.

Integrate JSS with React

There is a JSS Core library which can be used in any Javascript app, but React developers will be more interested in React-JSS.

Dynamic Values

Give attention to Dynamic values .

JSS uses Hooks API where you can use hooks like createUseStyles.

There is a cool example I will borrow from JSS docs about how to start with it. I will just separate a style from components, because it is always a good practice not to make a big clutter in one file. Also, it reminds of the CSS modules approach which have a separate isolated style for each component.

useButtonStyles.js

import { createUseStyles } from 'react-jss'

export const useButtonStyles = createUseStyles({
  myButton: {
    padding: props => props.spacing
  },
  myLabel: props => ({
    display: 'block',
    color: props.labelColor,
    fontWeight: props.fontWeight,
    fontStyle: props.fontStyle
  })
})

Notice how elegantly you can change the style depending on props values passed from the component.

index.js

import React from 'react'
import { useButtonStyles } from "./useButtonStyles";

const Button = ({children, ...props}) => {
  const classes = useButtonStyles(props)
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}

Button.defaultProps = {
  spacing: 10,
  fontWeight: 'bold',
  labelColor: 'red'
}

const App = () => <Button fontStyle="italic">Submit</Button>

Feel free to play with example on CodeSandbox.

Theming

Besides hook for creating style there is the useTheme combined with a ThemeProvider wrapper. It also provides a theming solution which makes it a lot easier to start writing themed apps with reusable styles, and to quick start your new project.

Would you give it a try?

❓ What are you thoughts?
❓ Which styling solution do you prefer?
❓ How do you deal with theming and reusable styles?

Easily sort imports and remove unused declarations on each save in VS Code

Damir Drempetić — Fri, 07 May 2021 15:03:55 +0000

All this time I was using VSCode formatting on save which triggers the selected default formatter (Prettier).

Also I was organizing and sorting my imports manually all the time. Or in other words, I didn’t. So foolish…

Because it couldn’t be more simpler to enable it without installation of any additional ESLint or Prettier plugins. Of course, I’m assuming you already have ESLint and Prettier VS Code extensions because they are a must have for any JavaScript project.

Just add the following to your VS Code settings.json:

 ...
 "editor.formatOnSave": true,
 "editor.codeActionsOnSave": {
   "source.fixAll": true,
   "source.organizeImports": true,
   "source.sortMembers": true
 }

fixAll is not necessary for this case but could be useful too.

fixAll property turns on Auto Fix for all providers including ESLint, according to VS Code Docs, Release Notes November 2019 (version 1.41)

🚀 Voilà, while having all these enabled in your settings, VS Code will automatically on each file save:

run code formatting with default formatter
sort imports
remove all unused declarations
run ESLint auto fix

It's always nice when you don't need to take care of these things manually, right? 😎 🤖