Get the finished code on Github.

Or, to code along from the previous article, clone this.

Step 1: It’s mostly about style, toast.scss

First thing to do here is to define a class for each position we’d like to be able to display a toast in:

.top-center {
  top: 1vh;
  left: 50%;
  margin-left: -10rem;
}

.top-left{
  top: 1vh;
  left:0px;
}

.top-right {
  top: 1vh;
  right:1vw;
}

.middle-left{
  top: 40vh;
}

.middle-center{
  top: 40vh;
  left: 50%;
  margin-left:-10rem;
}

.middle-right{
  top: 40vh;
  right:1vw;
}

.bottom-left {
  bottom: 1vh;
  left:0px;
}

.bottom-right{
  bottom: 1vh;
  right:1vw;
}

.bottom-center{
  bottom: 0px;
  left:50%;
  margin-left:-10rem;
}

You can play around with the particulars of these but the point is that they define a position on the screen and nothing else — these will be added to the same component as the toast-slice class defined previously but we’ll come back to the other classes in a moment.

Step 2: For consistency! types.js

Just to make them easier to cycle through in the component package and any app that uses it, I define an array of positions in types.js

export const POSITIONS = [
  'top-left', 'top-center', 'top-right',
  'middle-left', 'middle-center', 'middle-right',
  'bottom-left', 'bottom-center', 'bottom-right'
]

Step 3: Stay in your lane, Toast.js

I designed my component code in such a way that the ToastRackcomponent that accesses the toastState from a custom useStore hook (see previous article) will now map the toasts that need to be indifferent positions into their own arrays, then map each of those arrays into a ToastSlot component which, in turn, maps it’s array into a number of ToastSlice components:

First the ToastRack component, mapping a new array for each position in the POSITIONS array above:

export const ToastRack = () => {
  const [toastState, toastDispatch] = useStore();
  const positions = POSITIONS.map((pos, i) => {
    return [...toastState.toasts].filter((toast) => {
      if(toast.position === pos){
        return true;
      }
    })
  })

const slots = positions.map((pos, i) => {
    return(
      <ToastSlots
        key={i}
        toasts={pos} />
    )
  })

return(
    <div className={`toast-rack`}>
      {slots ? slots : 'Nothing'}
    </div>
  )
}

Then the new ToastSlots component sets it’s pos state based on the toasts it has received (or defaults to ‘top-center’) and maps an array of ToastSlice components:

export const ToastSlots = ({toasts}) => {
  const [pos, setPos] = useState();
  
  useEffect(() => {
    setPos(toasts && toasts[0] && toasts[0].position
    ? toasts[0].position  : 'top-center');
  },[toasts])

const toastComps = toasts?.reverse().map((t) => {

return(
    <ToastSlice
      key={t.id}
      t={t} />
    )
  })
  return <div className={`toast-slots ${pos}`}>{toastComps}</div>
}

Finally, the very simple ToastSlice component remains unchanged:

const ToastSlice = ({t}) => {
  return(
    <div className={`toast-slice `}>
      {t.message}
    </div>
  )
}

Step 4: Styling, toast.css

I added the .toast-slots class and moved some of the previous content from .toast-rack . Importantly, I’ve removed position attributes, like left and top from both of these classes, now relying on the position classes above.

The rest of this, you can play around with to get a similar but different result:

.toast-rack{
  position: fixed;
  min-width: 100vw;
  z-index: 1001;
}

.toast-slots{
  position:fixed;
  margin: 0px;
  padding: 0px;
  pointer-events: none;
  font-family: 'sans-serif';
  background-color: rgba(255, 255, 255, 0);
}

.toast-slice{
  pointer-events: all;
  position: relative;
  display: block;
  min-height: 50px;
  max-height: 30vh;
  width: 20rem;
  margin: 5px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 0px;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  color: rgba(40, 40, 40, 0.8);
}

Step 5: Action, App.js

In the demo app, I’ve added a few buttons to demo two of the positions:

import React from "react";
import { Button, ToastRack, useToastRack } from './lib';

const App = () => {
  const toast = useToastRack();
  
  const handleAdd = (pos) => {
    const id = toast.fire({
      message: `Hi, I am ${pos}`,
      position: pos ? pos : 'top-center'
    });
    console.log(id);
  }

const handleRemove = () => {
    toast.dismiss(toast?.toasts[0]?.id);
    console.dir(toast?.toasts);
  }

return(
    <div>
      <Button btnText={'Top right'} onClick={() => handleAdd('top-right')}/>
     <Button btnText={'Bottom left'} onClick={() => handleAdd('bottom-left')}/>
     <Button btnText={'Remove toast'} type={'alter'} onClick={handleRemove}/>
     <ToastRack />
    </div>
  );
}

export default App;

Give them a few clicks, and presto, you can take it from here:

I’ll be using the new hook with the simple toast component from a previous article.

Get the finished code for this article on Github.

Or, to code along, clone this to start.

Step 1: To the core

I added a new directory, /src/lib/core/ with two files, store.js and types.js

This is just a conventional place to put logical code that can be used by multiple components.

Step 2: Just your type(s), types.js

Very quickly, we’ll put an object called Actions in types.js, containing two constants, ADD_TOAST, and REMOVE_TOAST:

export const Actions = {
  ADD_TOAST: 'ADD_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST'
}

These are the two actions I currently have my app driving for demo purposes and we want to bring that logic into the library.

Step 3: Use the store, store.js

We first want to create a variable at the top level of the file, where they won’t be affected by re-renders, for a global state object and another for an array of listeners that we’ll connect to the state.

let globalToastState = {toasts: []}
const toastListeners = [];

Next we’ll define a reducer function that takes a state object and an action object as parameters and returns the state after the action has been completed. In here, we’ll put functions to add and remove toasts from the array toasts inside the state object:

const reducer = (state, action) => {
  switch(action.type){
    case Actions.ADD_TOAST:{
      const toasts = [...state.toasts];
      toasts.push(action.data);
      return({...state, toasts: toasts});
    }
    case Actions.REMOVE_TOAST:{
      let toasts = [...state.toasts];
      toasts = toasts.filter((e) => {
        return e.id !== action.data.id;
      });
      return({...state, toasts: toasts});
    }
    default:
      return(state);
  }
}

Finally, we define the useStore hook itself. This does two things:

It uses useState(), initialised with the global state defined outside the hook function and, inside a useEffect hook, adds the useState’s setState() function to the toastListeners array defined at the top level whenever setState is changed.

It also defines a dispatch function that uses the reducer defined earlier to update the state with an action and updates the state of each listener.

export const useStore = () => {
  const setState = useState(globalToastState)[1];
  useEffect(() => {
    toastListeners.push(setState);
    return() => {
      const index = toastListeners.indexOf(setState);
      if(index > -1){
        toastListeners.splice(index, 1);
      }
    }
  },[setState]);

  const dispatch = (action) => {
    globalToastState = reducer(globalToastState, action);
    for(const listener of toastListeners){
      listener(globalToastState);
    }
    return globalToastState;
  }
  return [globalToastState, dispatch];
}

We can use the listeners to update all kinds of info to do with each toast later on, but that falls outside the scope of this article.

Importantly, the useStore hook returns an array containing the global state object and the dispatch function. We can access these later in a similar way to the built in react hook useState.

Step 4: Using useStore, Toast.js, index.js

Previously, we’d passed an array of toast objects into the ToastRack components but now we can replace that with a call to useStore:

export const ToastRack = () => {

  const [toastState, toastDispatch] = useStore();

  const toastComps = [...toastState.toasts]
    .map((t, i) => <ToastSlice key={i} t={t}/>)
    .reverse();
    
    return(
      <div className={`toast-rack`}>
       {toastComps}
      </div>
    );

}

Simple. We also need to expose some functions for an app to use the reducer actions ADD/REMOVE_TOAST. To do this, we’ll create another customer hook called useToastRack:

export const useToastRack = () => {

  const [toastState, toastDispatch] = useStore();

  const fire = (params) => {
    params = params ? params : {};
    const toast = {
      id: params.toastId ? params.toastId : uuidv4(),
      message: params.message 
               ? params.message 
               : 'Things are happening',
    }
    toastDispatch({
      type: Actions.ADD_TOAST,
      data: toast
    });
    return toast.id;
  }

  const dismiss = (id) => {
     toastDispatch({
       type: Actions.REMOVE_TOAST,
       data: {id: id}
     });
  }

  return {
    "fire": (params) => fire(params),
    "dismiss": (id) => dismiss(id),
    "toasts": {...toastState.toasts}
  }

}

Here, we’ve defined the fire and dismiss function, which in turn call the toastDispatch returned by the useStore hook.

We then return an object containing both these functions and a property containing the array of toast objects from the state returned by useStore.

Notice that I’m using the function uuidv4() from the libary uuid. You can install this with npm install uuid then import it to your component file using import {v4 as uuidv4} from `uuid` . This is a small library for generating an essentially unique id in various formats.

We’ll also want to export the useToastRack function, updating the existing export in index.js

export { ToastRack, useToastRack  } from './components/toast/Toast';

Step 5: Hooked on a… demonstration of basic functionality, App.js

In our demo app, we can replace the array, the useState, and the content of the handler functions attached to our two buttons to instead allow the library to handle the toast state, while the app can call the fire and dismiss functions exposed by useToastRack:

import React from "react";
import { Button, ToastRack, useToastRack } from './lib';

const App = () => {
  const toast = useToastRack();
  const handleAdd = () => {
    const id = toast.fire({message: "Hi. I am toast"});
    console.log(id);
  }

  const handleRemove = () => {
    toast.dismiss(toast?.toasts[0]?.id);
    console.dir(toast?.toasts);
  }

  return(
    <div>
      <Button btnText={'Add toast'} onClick={handleAdd}/>
      <Button btnText={'Remove toast'} type={'alter'} 
        onClick={handleRemove}/>
      <ToastRack />
    </div>
  );
}

export default App;

And like that, we can add and remove toasts, log out their ids on creation and log out the whole array from the app, while the library takes care of the logic:

You sure are buddy, you sure are toast.

Conclusion

That’s about the most basic example of a custom useStore hook I could create and seems to be working for my purposes. Most importantly for the use case of a small component library, I’ve only added one little dependency.

In further articles, we’ll step through various way of giving the toasts their own lifecycles and add some parameterised visual variations.

The component I want to make is a toast notification, largely because I found myself writing the same chunks of code into two different apps in order to adapt an existing npm package to my purposes.

Get the completed code on Github.

Or, to code along, clone this to start.

Before we start (if you’re coding along):

In the existing Button component, I removed the nonsense onClick function and am instead passing an onClick prop into the button so that it can actually be used for something:

export const Button = ({btnText, onClick, type}) => {
  return (
    <button
      className={`butt shade ${type}`}
      onClick={onClick}
    >
      {btnText}
    </button>
  )
}

Step 1: A New Component, Toast.js

I added a new directory at src/lib/components/toast/ with a component file and style sheet, Toast.js and toast.scss.

In Toast.js, I’m creating a component ToastSlice to represent the individual notifications and exporting a component ToastRack as a holder for all my toasts. For the moment, toasts will be js objects with the simple format {id: 0, message: "text"} and, for the moment, will be passed as props into the ToastRack component.

import React from 'react';
import './toast.scss';

const ToastSlice = ({t}) => {
  return(
   <div className={`toast-slice `}>
     {t.message}
   </div>
  )
}

export const ToastRack = ({toasts}) => {
  const toastComps = toasts.map((t, i) =>
    <ToastSlice key={i} t={t}/>).reverse();
  
  return(
    <div className={`toast-rack`}>
      {toastComps}
    </div>
  )
}

Notice I’ve imported toast.scss and used some class names, toast-slice and toast-rack although these don’t exist yet.

Step 2: Exporting from the component library, and taking a look in the demo app, /lib/index.js, App.js

I only need to export the ToastRack component right now, but I’m also updating the export for my Button to be a bit more consistent as well.

So the whole code of /lib/index.js is now:

export { Button } from './components/button/Button';
export { ToastRack } from './components/toast/Toast';

To see what these will look like, I made up an array with three toast objects and pass them to a ToastRack component in our demo App.js (we can leave our useless buttons there for illustration purposes):

import React from "react";
import { Button, ToastRack } from './lib';

const dummyToasts = [
  {
    id: 0,
    message: "The first toast"
  },
  {
    id: 1,
    message: "The second toast"
  },
  {
    id: 2,
    message: "The third toast"
  }
];

const App = () => {
  return(
    <div>
      <Button btnText={'Demo button'}/>
      <Button btnText={'Alternate button'} type={'alter'}/>
      <ToastRack toasts={dummyToasts} />
   </div>
  );
}

export default App;

This gives us (drum roll, please) some ugly text of course, displayed in blocks under the existing buttons:

The stodgy dough balls of react components.

Step 3: Make it pop, toast.scss

The initial stylesheet is below:

.toast-rack{
  position: fixed;
  min-width: 100vw;
  z-index: 1001;
  top: 2vh;
  left: 2vw;
  margin: 0px;
  padding: 0px;
  font-family: 'sans-serif';
  background-color: rgba(255, 255, 255, 0);
  pointer-events: none;
}

.toast-slice{
  pointer-events: all;
  position: relative;
  display: block;
  min-height: 50px;
  max-height: 30vh;
  width: 20rem;
  margin: 5px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 0px;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  color: rgba(40, 40, 40, 0.8);
}

The essential parts being:

toast-rack : The holder should have position:fixed so that, wherever you decide to put it, it stays exactly there, no matter what else is going on and should have z-index set to an arbitrarily high number, so that it’s contents float “above” the rest of your app.

I’ve also set pointer-events: none so that, since this component will potentially cover everything else on screen, any pointer events will be allowed to pass through to the rest of the app regardless.

toast-slice : The toast itself will have pointer-events turned back to all to allow interactivity. I’m setting position:relative so that, when I add other elements to the component, I can use position:absolute to position them precisely.

I’ve set display:block to ensure these stack one per line and the rest of this is just colouring and shaping into a rounded, slightly translucent white toast which doesn’t sound tasty but looks pretty good:

Pointless Diversion: Just to see some action

This code won’t be useful in the component library, but just for fun and to see toasts created and dismissed as you’d expect, I updated App.js to create and remove toasts from an array with useState() and passed that state to the ToastRack component:

const App = () => {
  
  const [toasts, setToasts] = useState([]);

  const handleAdd = () => {
    const ts = [...toasts];
    ts.push({
      id: toasts.length,
      message: `This id system is unsustainable: ${toasts.length}`
    });
    setToasts(ts);
  }

const handleRemove = () => {
  let ts = [...toasts];
  ts.pop();
  setToasts(ts);
  console.log(toasts);
}

return(
  <div>
    <Button btnText={'Add toast'} onClick={handleAdd}/>
    <Button btnText={'Remove toast'} type={'alter'} 
      onClick={handleRemove}/>
    <ToastRack toasts={toasts} />
   </div>
  );
}

In the next article, we’ll develop a system for the toast library to take care of it’s own state.

Conclusion:

This guide stepped coding and styling a beautiful but dumb toast notification component. The next article will move the create and remove logic from the demo app to the library, using custom hooks.

Option 1: CSS

Get the finished code for this option on Github.

To code-along from the same project, clone this to start.

Step 1: Add a .css file, code it and import it

The most obvious option is to put our styles in .css files and import them into our components. I decided to move my Button component into it’s own directory and create a dedicated .css file in there called button.css, just to keep everything related to a particular component in one place.

For the content of the css file, I’m creating a buttclass for colouring and shaping the button and a shade class to add shadow. Both of these have hover and active pseudo-classes implemented to add interactivity.

.butt {
  padding: 12px;
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(180, 180, 180);
  color: rgb(80, 80, 80);
  border-radius: 0.5vh;
  cursor: pointer'
}

.butt:hover{
  transform: scale(1.02);
}

.butt:active{
  transform: scale(1);
}

.shade {
  box-shadow: 1px 1px 3px;
}

.shade:hover{
  box-shadow: 2px 2px 5px;
}

.shade:active{
  box-shadow: 0px 0px;
}

To use these styles in my Button component, I’ve imported it and used the two classes as the className prop in my button tag.

import React from 'react';
import './button.css';

export const Button = ({btnText}) => {
  return (
    <button
      className='butt shade'
      onClick={() => {console.log("It worked!")}}
    >
      {btnText}
    </button>
  )
}

Because I moved the Button.js file into it’s own directory, I’ve had to update the import statement in src/lib/index.js

import { Button } from './components/button/Button';

If you run npm run start right now, you’ll see your newly-styled button working like so:

Unfortunately, if you run npm run prepublish to build the component library for publishing, you’ll get an error explaining that you might be missing a loader for certain file type.

Step 2: css-loader, webpack.config, package.json

In your config.module.rules, you should already have an array with one object, referring to ‘babel-loader’. You’ll need to add the following rule object to the same array:

{
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
}

(You can return to createapp.dev any time to crib the code needed to add elements like this)

You’ll also need to intall style-loader and css-loader as dev dependencies:

npm install --save-dev style-loader css-loader

Now you can run npm run prepublish , followed by npm publish (after updating the version number in package.json!) to build and publish the package. Installing it in another app, you should now see the styling built into the button.

Option 2: Styling the component directly

Get the finished code for this option on Github.

To code-along from the same project, clone this to start.

To make your component as minimal as possible, you might want to put the styling directly into the component. This won’t require any extra loader but it can get pretty complex pretty quickly.

You can create a new file(s) to store your styles and import them like any other object to your component file but I’ve put my style objects in the Button.js file for the moment to show a minimal example.

Step 1: Style objects

First, I’m just adding objects equivalent to the basic classes from Option 1, without “hover” and “active” implementations and using those in the button tag’s style prop with style:{{...butt, ...(shade)}}:

import React, { useState } from 'react';

export const Button = ({btnText}) => {
  
  const butt = {
    padding: '12px',
    backgroundColor: 'rgb(240, 240, 240)',
    border: '1px solid rgb(180, 180, 180)',
    color: 'rgb(80, 80, 80)',
    borderRadius: '0.5vh',
    cursor: 'pointer',
  }

const shade = {
    boxShadow: '1px 1px 3px',
  }

return(
    <button
      style={{...butt, ...(shade)}}
      onClick={() => {console.log("It worked!")}}
    >
       {btnText}
    </button>
  )
}

You can more-or-less use any CSS property here by changing the syntax from background-color to backgroundColor for the property names and putting all property values between quotes (also separate with commas, not semi-colons because these are javascript objects).

Step 2: Style logic

While the css method of adding hover and active psuedo-classes is completely standardised and very simple, I had to go looking for ideas about how to implement this with jsx style objects. This SO question has a few solutions and I’ve implemented one below:

import React, { useState } from 'react';

export const Button = ({btnText}) => {

  const [state, setState] = useState(0);
  
  const butt = {
    padding: '12px',
    backgroundColor: 'rgb(240, 240, 240)',
    border: '1px solid rgb(180, 180, 180)',
    color: 'rgb(80, 80, 80)',
    borderRadius: '0.5vh',
    cursor: 'pointer',
  }

  const buttHover = {
    transform: 'scale(1.02)'
  }

  const buttActive = {
    transform: 'scale(1)'
  }

  const shade = {
    boxShadow: '1px 1px 3px',
  }

  const shadeHover = {
    boxShadow: '2px 2px 5px'
  }

  const shadeActive = {
    boxShadow: '0px 0px'
  }

  return(
    <button
      onMouseEnter={() => setState(1)}
      onMouseLeave={() => setState(0)}
      onMouseDown={() => setState(2)}
      style={{...butt, ...(shade),
        ...(state === 1) 
          ? buttHover 
          : (state === 2) 
            ? buttActive 
            : null,
        ...(state === 1) 
          ? shadeHover 
          : (state === 2) 
            ? shadeActive 
            : null
      }}
      onClick={() => {console.log("It worked!")}}
    >
       {btnText}
    </button>
  )
}

Here, I’m using useState()to hold a value indicating whether the mouse is over the button, or not, or has been pressed; triggered by onMouseEnter / onMouseLeave / onMouseDown events.

Then I’m adding the relevant style objects to the style prop, depending on the value of that state.

Running npm run start should show you exactly the same result now as the CSS solution and running npm run prebublish to build it won’t show any errors because no extra loaders are required.

It’s pretty clear though that the component code, even if I move the style objects into their own file, has gotten pretty complicated for something that was achieved in css using .my-class:hover . I might use some of this kind of implementation for specific use-cases but in general, using and importing .css files makes a lot more sense if my component needs much styling built in.

Option 3: Sass loader

Get the finished code for this option on Github.

To code-along from the same project, clone this to start, or continue where you finished Option 1.

If you want to use a Sass pre-compiler for your style sheets, you can pick up where we left off with the CSS-Loader section and just use Sass instead.

Step 1: Change your .css files to .scss

I’ve just got one .css file from before, so I’ve changed the name button.scss and updated the reference to it in Button.js to

import './button.scss'

Step 2: Sass-Loader, webpack.config.js, package.json

If you have the css-loader rule object in your webpack.config.js file, replace it with a new rule below:

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}

Or add that rule if you’re using sass from the start.

You’ll also need to install sass-loader and sass packages (and style-loader and css-loader if you’re starting from scratch).

Always with the dev dependencies:

npm install --save-dev sass-loader sass

I saw other guides recommending node-sass instead of sass here but I had conflict issues with it, so used sass package.

And that’s it in terms of migrating what we had with the CSS option. You can run this in the test app, build it, publish it, import it to a new project and it will work exactly the same as the other options.

Step 3: Why bother with Sass?

Sass is a pre-processor for CSS that is rich in features for abstracting and maintaining complex style sheet functionality. We’ll implement one feature now just to show why this can be a better option for more complex use-cases.

Step 3.1: Creating variables, _colours.scss

A quick way to leverage Sass is to store some colour variables in another file and reference them throughout a project.

I created a new directory /src/lib/sass/ with a file _colours.scss (it’s convention to include that underscore at the beginning of the file name when creating partial files like these. Sass will recognise these as modules).

In _colours.css , I declared some variables with $ symbol at the beginning of variable names:

$bg-standard: rgb(240, 240, 240);
$brd-standard: rgb(180, 180, 180);
$txt-standard: rgb(80, 80, 80);

$bg-alter: rgb(80, 80, 80);
$brd-alter: rgb(140, 140, 140);
$txt-alter: rgb(240, 240, 240);

These describe colours I want to use for “standard” button type and an alternate type.

Step 3.2: Using variables, button.scss

In my button.scss file, I need to tell it to use the colours file by adding this at the beginning of the file:

@use '../../sass/colours';

Then, anywhere I want to use one of the declared colour variables, I can do so like this (syntax: module.$var-name):

...
  background-color: colours.$bg-standard
...

I updated my butt class with the “standard” variables, and added a new alter class with the alternate variables:

.butt {
  margin:0.2vh;
  padding: 12px;
  background-color: colours.$bg-standard;
  border: 1px solid colours.$brd-standard;
  color: colours.$txt-standard;
  border-radius: 0.5vh;
}

.alter {
  background-color: colours.$bg-alter;
  border: 1px solid colours.$brd-alter;
  color: colours.$txt-alter;
}

Step 3.3: Implementing variations

Of course, we could code a new button now that uses the alter class but lets implement a way to produce as many variants as we want with minimal code.

I’ve changed the signature of the Button component to take a new prop type :

export const Button = ({btnText, type}) => {

Then I’ve updated the className prop value in button tag to use the type value:

className={`butt shade ${type}`}

For flavour, I’ve updated the button’s onClick function to use the type value as well, just to print the type to console:

onClick={() => {
  console.log(`It worked! (${
    type
    ? type
    : 'standard'})`
  )
}}

So the whole component code now looks like this:

import React from 'react';
import './button.scss';

export const Button = ({btnText, type}) => {
  return (
    <button
      className={`butt shade ${type}`}
      onClick={() => {
        console.log(`It worked! (${
          type
          ? type
          : 'standard'})`
        )
      }}
    >
      {btnText}
    </button>
  )
}

Step 3.4: Using the variations

If we update our demo app’s App.js, adding another button and supplying the prop type={'alter'} it will look something like this:

import React from "react";
import { MyButton } from './lib';

const App = () => {
  return(
    <div>
      <MyButton btnText={'Demo button'}/>
      <MyButton btnText={'Alternate button'} type={'alter'}/>
    </div>
  );
}

export default App;

And running the demo app, npm run start , we should be able to test the two variants like so:

A little wrinkle came up here though — the shadow has disappeared from the alternate button.

The reason for this is that the colour for the box-shadow css property defaults to the color property already applied using the alter class. To fix this, we can specify the colour like so:

box-shadow: 1px 1px 3px colours.$txt-standard

Conclusion

In this article we tried CSS, inline styles, and finally Sass to get style into our component package. I definitely feel like I got more bang for my line of code using Sass, so if you’re following along, I’ll be continuing to build this component library from where I’ve left off with the Sass solution.

You can get the completed code for this article on github.

Or to code-along from end of the previous article, clone this to start.

Step 1: Going public

To start a running app, I created a public/ directory to house my index.html file. I’ve also created manifest.json and robots.txt , although these aren’t really necessary because I’m not planning on running this app anywhere except locally but I’m copying the basic structure of a create-react-app, so keeping these for completeness.

Here’s the content of index.html (It’s a stripped down copy of the one from a create-react-app)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Library test site"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>react-comp-pack</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

For argument’s sake, here’s the content of manifest.json

{
  "short_name": "react-comp-pack",
  "name": "React Component Package demo app",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

And robots.txt

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

Step 2: Coding the app

The project created in the previous article already has index.js and App.js files in src/but I first want to swap out the content of index.js to render the root element declared in public/index.html .

Here’s the content:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

In App.js , I’m just going to import my library component and render it:

import React from "react";
import { MyButton } from './lib';

const App = () => {
  return(
    <div>
      <MyButton btnText={'Demo button'}/>
    </div>
  );
}

export default App;

The only kink here was to import the component from ./lib , which is interpreted as whatever is exported from lib/index.js because the exports are declared as such in package.json.

Step 3: Running the app

I decided to install react-scripts as a quick way to get the app running, but only installing it as devDependency :

npm install --save-dev react-scripts

Once intalled, you can change the value of scripts.start to call react-scripts’ start command:

"scripts":{
  ...
  "start": "npx react-scripts start"
}

And that should be it, you can run the demo app with

npm run start

If you’ve never used / installed npx before, you’ll be prompted to install it.

You’ll also be prompted to allow react-scripts to add default values for browserlist in package.json. Approve that and you can see afterward that the following will be added to package.json:

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

NOTE: At time of writing, installing react-scripts will throw up a dozen vulnerability warnings but, since I’m only running this app locally, I chose this as the quickest way to get up and running.

Conclusion:

And boom, you can see and test the library component without needing to publish / import over and over:

In the next article, we’ll expand the library a little and explore options for adding styling to the build.

Having created a few apps with Create-React-App, then wrestling with upgrades and alternatives to that and react-scripts when moving from webpack v4 to v5, I realised I needed a better understanding of webpack and decided to build up a package of Reactjs components as way to learn more about the build process.

The final code for this guide is on github:

Step 1: The easy part

Webpack recommends a visit to https://createapp.dev/webpack/, a handy online tool that lets you not only generate a webpack.config.js for various purposes, but also provides minimal boiler-plate project files.

I selected React as my main library, which auto-checked Babel as my transpiler (great, I kept that) and react-hot-loader under the section React (I unchecked react-hot-loader because I’m making a library, not an app and I want to keep it tiny).

That’s it - download the project like this, extract it to your project directory and open the directory in your favourite IDE (I’m using Visual Code and called my project react-comp-pack)

Step 2: Basic info, package.json

Let’s edit the basic details of package.json. ( * = important bits)

"name": "react-comp-pack",
"version": "1.0.6",
"description": "A package of react components",
"main": "dist/index.js",
"module": "dist/index.js",
"files":[
  "dist",
  "README.md"
],
"keywords": [
  "react",
  "toast",
  "components"
],
"author": "arfi720",
"license": "ISC",

Name it whatever you are naming your package.
*Provide a version number (you’ll need to update this each time you want to publish)
*Provide main and module entry points (we will change main in a follow up article but I’m setting both to dist/index.js for now)
*Provide files array: I only want to include whatever is in the dist directory and the README file.
Keywords are more relevant to a publicly published package but why not include some.
Author and license are up to you.

Step 3: Dependencies, (or lack there-of), package.json

Sticking with package.json but moving swiftly passed the scripts section, I renamed the dependencies object (currently only containing react and react-dom ) to peerDependencies . This means that we don’t want to bundle react up with our build like we would with an app, but we would like whoever is using our package to have react and react-dom as a dependency in their app.

"peerDependencies": {
  "react": "^17.0.0",
  "react-dom": "^17.0.2"
}

I lowered the versions to 17 from the auto-generated v18 because I’m just not ready for that yet.

I’m also adding these same two dependencies to devDependencies so that I can depend on them while developing. With the generated webpack and babel devDependencies, we have this:

"devDependencies": {
  "webpack": "^5.72.0",
  "webpack-cli": "^4.9.2",
  "@babel/preset-react": "^7.16.7",
  "babel-loader": "^8.2.4",
  "@babel/core": "^7.17.9",
  "@babel/preset-env": "^7.16.11",
  "react": "^17.0.0",
  "react-dom": "^17.0.2"
}

Step 4: Entry and Output (oh my), webpack.config.js

In terms of trying to build a package, not an app, this is probably the most important part. Paths are arbitrary but it’s best to keep to standard practice, which seems to be having an entry point ./src/lib/index.js , because we’re going to put everything we want to export inside src/lib/ .

The output object should contain path , filename (I changed mine from bundle.js to index.js because my package.json’s module value is going to look for src/dist/index.js ), library (I’ve included one component name, you can include an array of multiple as well), libraryTarget , and publicPath — mostly self-explanatory.

entry: './src/lib/index.js',
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'index.js',
  library: 'MyButton',
  libraryTarget: 'umd',
  publicPath: '/dist'
},

While we’re here, the only other things I’m adding to webpack.config.js are the externals and resolve.alias objects that help the build know to look for react and react-dom.

externals: {
  react: {
    commonjs: "react",
    commonjs2: "react",
    amd: "React",
    root: "React"
  },
  "react-dom": {
    commonjs: "react-dom",
    commonjs2: "react-dom",
    amd: "ReactDOM",
    root: "ReactDOM"
  }
},
resolve: {
  alias: {
    'react': path.resolve(__dirname, './node_modules/react'),
    'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
  }
},

Step 5: Ignorance is bliss, .npmignore / .gitignore

If you don’t include an .npmignore file, npm will use your .gitignore, so best to include one — here’s the content of mine:

webpack.config.js
.eslintrc
.gitignore
.babelrc

Come to think of it, the auto-generated .gitignore is pretty bare, so you might want to update that, assuming you’re creating a repository for your package project (you should definitely be doing that)

The main thing I wanted to change was

dist/*
!dist/index.html

to

dist/

Just because I won’t be having and index html in there.

Step 6: Shouldn’t we have some code to build?

Fair.

We’ve declared src/lib/index.js as our entry point already, so I created that directory and file for a start.

Then I created a directory src/lib/components/ with a file called Button.js

Here’s the content:

import React from 'react';

export const Button = ({btnText}) => {
  return(
    <button onClick={() => {console.log("It worked!")}}>
      {btnText}
    </button>
  )
}

Inspirational stuff. Here’s the content of src/lib/index.js

import { Button } from './components/Button';
export const MyButton = Button;

Here, we’re simply exporting and aliasing the components we want to be available to the module users. (Remember the output.library property from Step 4? That’s where the alias comes in)

Step 7: Building the thing, package.json

Before put the finishing touches on package.json, because I’m on a Windows machine and most scripts you find online are Unix flavoured, I added another devDependency to help with this:

npm install --save-dev run-script-os

Then I added the following prepublish and buildcommands to the scripts object in package.json

"prepublish": "run-script-os",
"prepublish:darwin:linux": "rm -rf ./dist && npm run build",
"prepublish:win32": "rmdir /s dist && npm run build",
"build": "webpack --mode development",

The run-script-os library just takes care of running either the powershell or unix shell version of the same rm command, before running the build command. I’m building in development mode because I’m in development but you can change this according to your needs.

Step 7 and a half: Darn it

I thought I was done but because I lowered the versions of react and react-dom at the beginning from the auto-generated v18, down to v17, the code the auto-generated App.js had errors on build, so I’ve just replace the contents with:

import React from "react";
const App = () => {
}
export default App;

The next article will implement a demo app with this file which is why I’m leaving it here at all.

Step 8: Actually building the thing

Run the prepublish command to build the libary:

npm run prepublish

Then run

npm publish --tag beta
#you can remove --tag beta when you are ready to go public

At this point, you may get an error because you don’t have an account with npm — create an account and try again. That should do it.

Step 9: omg omg omg, testing

Open or create another, working react app and install your new component libary

npm install react-comp-pack@1.0.0

or

yarn add react-comp-pack@1.0.0

I’ve imported and used my button component like this:

import { MyButton } from 'react-comp-pack'
export const App = () => {
  return(
    <div>
      <MyButton btnText={"My New Button"}/>
    </div>
  )
}

Running the new app, I get a button. When I click the button, it works.
I know it works because it tells me so:

Conclusion:

This guide showed you how to privately publish a super-simple react component library. In further articles we’ll go through adding a demo app to the same project, so you can actually test without constantly publishing a new version and, later, how to add further elements to the build, like options for styling and some more complex functionality.

References:

Creating Node.js modules | npm Docs
Node.js modules are a type of package that can be published to npm. Create a package.json file Create the file that…docs.npmjs.com

How to package your React Component for distribution via NPM
I wrote a React component, transpiling using Babel, bundling and building using Webpack. I wanted to use it in another…itnext.io

Publish React components as an npm package
This article will review how to publish React components as an npm package with Babel 7 (the latest version at the time…levelup.gitconnected.com