Candytext: Building an npm package
There are lots of great blog posts and instructional examples on how to build packages and push them to
npm install thing --save
Then there are the reasons as to why you would build an
npm hosted package and mine was a set of common functionality that I kept copying into projects to use again and again. Brace yourself; my version of functionality might be your version of stupid.
If you’ve never created and pushed a package to a registry, there is great article written by Alex Eagleson (link at the bottom of this post) on pushing one to the GitHub package repository system. The same approach works for the npmjs registry with a couple of tweaks to the
What did I build?
A simple package written in Typescript with three React functional components. Those components are below and the source code on GitHub repository is here: https://github.com/davedotdev/candytext.git. I called it Candytext because it’s sugar coating of text!
does nothing more than pluralise a word if a count value warrants it. It accepts a
word and a
count property. Count can be a
number or a
boolean value. If count is above
true, then the word has an
s appended. I had some horrendous looking code to do this and it made it awful to read.
PrettyDate and PrettyDateTime
are similar. They both accept an
inputdate property and optional
timezone property. They output a string which represents a prettified date such as:
6th July 2022 or
10:00 PM 6th July 2022. The
inputdate property can be of types:
ISO8601 string or an
epoch in milliseconds or seconds.
Yes, each component has tests. They are here: https://github.com/davedotdev/candytext/tree/main/src/tests.
I’m a huge fan of Storybook and it’s really changed how I’ve approached building React components and tweak them. I opted to include Storbook files for this library so you can use them without requiring a test harness.
Using These Components
In your React app, these components are straight forward to use.
npm install candytext
- Import the component:
Here is a codesandbox example for Pluralise!: https://codesandbox.io/s/pluralise-test-harness-v0lj3j
I built a small set of React components for webapps that need some sugar adding to strings and put the package up on npmjs and GitHub’s package system. In addition, the components have tests, Storybook stories and examples of Codesandbox use so you can play around.
How to Create and Publish a React Component Library by Alex Eagleson is a really great post covering an end-to-end example.
How to publish packages to npm isn’t as comprehensive, but it’s a good read.
SPDX License Types is a handy reference. I’d never heard of SPDX prior to building this library and it was nice to learn something new. When doing things like
npm init, it will ask you for a license type. You can pull one from this list.
IANA TimeZones is a really important site that contains the browser time-zones that you’re likely going to use in your web apps. I tested with a number of them for the
PrettyDateTime components. Good to have an official list instead of just pulling them from Stackoverflow.
Say thanks and buy me a coffee!
- Tags: npm, package building
- Categories: npm, package building