Building reusable components

With functional programming, Typescript generics & Russian doll nesting

Gain reusability by nesting a general component within an applied component

I will show how one can create reusable components by walking through a drag-and-drop sorting list created with maximum reusability in mind.

We will build two components, one nested inside another. Do check out the playable demo at the end of this article.

// Blueprint
<App /> {/* Handles the state */}
|
+ - <AppliedSortableList<Item>
      unsortedItems={listedBooks}
      onSorted={setListedBooks}
    /> {/* Handles project-specific mapping */}
    |
    + - <SortableList<Item>
          items={items}
          onSorted={onSorted}
        /> {/* Handles the general sorting */}

1. Build a general component without any project-specific logic

// SortableList.tsx
import React, { useEffect, useRef } from 'react';
import Sortable, { Swap, Options } from 'sortablejs';
import DragHandle from '../DragHandle/DragHandle';
Sortable.mount(new Swap());
type SortId = string;
export interface SortableItemProps<Item> {
  sortId: SortId;
  sortLabel: string;
  item: Item;
}
const SortableItem = <Item extends unknown>({
  sortId,
  sortLabel
}: Omit<SortableItemProps<Item>, 'item'>) => (
  <div data-sort-id={sortId} className="sortable-item">
    <DragHandle />
    {sortLabel}
  </div>
);
// REF: https://github.com/SortableJS/Sortable#options
const defaultSortableOptions = {
  animation: 500,
  draggable: '.sortable-item',
  handle: '.drag-handle',
  ghostClass: 'sortable-ghost',
  chosenClass: 'sortable-chosen',
  dragClass: 'sortable-drag',
  swap: false
};
export interface SortableListProps<Item = unknown> {
  items: SortableItemProps<Item>[];
  onSorted: (sortedItems: Item[]) => void;
  sortableListClassName?: string;
  options?: Omit<Options, 'dataIdAttr'>;
}
function SortableList<Item extends unknown>({
  sortableListClassName = 'sortable-list',
  items,
  onSorted,
  options = defaultSortableOptions
}: SortableListProps<Item>) {
  const sortableListElement = useRef<HTMLElement | null>(null);
  useEffect(() => {
    const element = sortableListElement.current;
    // REF: https://github.com/SortableJS/Sortable#options
    const sortable = Sortable.create(element as HTMLElement, {
      ...options,
      dataIdAttr: 'data-sort-id',
      onEnd: () => {
        onSorted(
          sortable
            .toArray()
            .map(
              (sortId: SortId) =>
                (items.find(
                  (item) => item.sortId === sortId
                ) as SortableItemProps<Item>).item
            )
        );
      }
    });
  return () => {
      sortable.destroy();
    };
  }, [items, onSorted, options]);
  return (
    <section className={sortableListClassName} ref={sortableListElement}>
      {items.map(({ sortId, sortLabel }) => (
        <SortableItem<Item>
          key={sortId}
          sortId={sortId}
          sortLabel={sortLabel}
        />
      ))}
    </section>
  );
}
export default SortableList;

The general component SortableList contains:

• sensible default options to configure the drag-and-drop library SortableJS to save the need for (but does not prevent) further configuration from the outside
• initialization of the the vanilla JS drag-and-drop library SortableJS in useEffect(…)
• cleanup logic to destroy the old instance of SortableJS in useEffect(…) whenever an updated list of items is passed in
• callback onSorted to map the rearranged list of items from the DOM (by way of data-* attribute) and pass it up to the applied component AppliedSortableList
• JSX and CSS for the look and feel that will be reused for sorting any list of items

Notice that the general component SortableList accepts a generic argument Item so the shape of the items being sorted and later handled by the callback onSorted will not be a mystery.

2. Build an applied component from a higher order component

// AppliedSortableList.tsx
import React from 'react';
import SortableList, {
  SortableItemProps,
  SortableListProps
} from '../SortableList/SortableList';
import { NanoIdService } from '../../services/nanoid';
const generateUniqueId = new NanoIdService().generate;
export interface BookMetadata {
  title: string;
  authors: string[];
  published: number;
  series: string;
}
interface AppliedSortableListProps<Item> {
  unsortedItems: Item[];
  onSorted: SortableListProps<Item>['onSorted'];
}
export const createAppliedSortableList = <Item extends unknown>(
  functor: (item: Item) => SortableItemProps<Item>
) =>
  function AppliedSortableList({
    unsortedItems,
    onSorted
  }: AppliedSortableListProps<Item>) {
    const items = unsortedItems.map(functor);
    return <SortableList<Item> items={items} onSorted={onSorted} />;
  };
export const AppliedSortableList = createAppliedSortableList<BookMetadata>(
  (unsortedItem) => ({
    sortId: `sort-${generateUniqueId()}`,
    sortLabel: unsortedItem.title,
    item: unsortedItem
  })
);

Now put all the project-specific logic in a separate component.

This includes, amongst other things:

• the interface of the items, BookMetadata, to be sorted
• a generateUniqueId() function so that even items without any unique property would have a unique identifier attached to it so it can be sorted by SortableList.
• callback onSorted to pass the rearranged list of items back to the parent component
• a higher order component createAppliedSortableList(…) which accepts a functor that will remap the list of items to the shape that the general component SortableList needs. This is an inversion of control where the general component SortableList calls the functor given by the applied component AppliedSortableList to execute project-specific code. This is how you will be able to use createAppliedSortableList(…) to reuse SortableList for any list of items of any shape.

Notice that createAppliedSortableList(…) uses partial application, where arguments are passed in in stages.

const createAppliedSortableList: <Item extends unknown>(
  functor: (item: Item) => SortableItemProps<Item>
) => (
  { unsortedItems, onSorted }: AppliedSortableListProps<Item>
) => JSX.Element

This allows:

• the argument for functor to be passed in separately from the props, allowing us to break AppliedSortableList out from SortableList.
• the inner function to be defined with the assumption that the needed argument, i.e., functor, will be there when invoked.

Components making components! How perverse and reusable!

Notice that the applied component AppliedSortableList has the interface BookMetadata passed in as generic argument for Item that is then applied to the general component SortableList.

3. Use the applied component

function App() {
  const [listedBooks, setListedBooks] = useState<BookMetadata[]>([
    {
      title: 'Dune',
      authors: ['Frank Herbert'],
      published: 1965,
      series: 'Original'
    },
    {
      title: 'Dune Messiah',
      authors: ['Frank Herbert'],
      published: 1969,
      series: 'Original'
    },
    {
      title: 'Children of Dune',
      authors: ['Frank Herbert'],
      published: 1976,
      series: 'Original'
    },
    {
      title: 'God Emperor of Dune',
      authors: ['Frank Herbert'],
      published: 1981,
      series: 'Original'
    }
  ]);
  
  return (
    <AppliedSortableList
      unsortedItems={listedBooks}
      onSorted={setListedBooks}
    />
  );
}

Finally, pass in the list of items listedBooks and state setter function setListedBooks which will receive the rearranged list of items.

Playable Demo

Open in CodeSandbox.