Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Zip List

A super simple TypeScript implementation of a basic zip list from the "Making Impossible States Impossible" talk at Elm Conf by Richard Feldman. You can read more about this in my blog post on Making Impossible States Impossible in React.

Used to model a list of data where one item is active. The underlying data structure is:

{ previous: [1], current: 2, next: [3] }

This module provides a nice wrapper around that data structure with a nice API.


npm install @jackfranklin/zip-list
yarn add @jackfranklin/zip-list


Construct a zip list using the static fromArray method:

import ZipList from '@jackfranklin/zip-list';

const zip = ZipList.fromArray([1, 2, 3]);

This will set the first item (1) as active.

If you're using TypeScript, you can pass the type through as a generic to fromArray:

interface MyObj {
  name: string;

const zip = ZipList.fromArray<MyObj>([{ name: 'alice' }, { name: 'bob' }]);

Fetch and check if an item is active: === 1;
zip.isActive(2) === false;

Get the data as an array (useful for rendering):

zip.asArray() === [1, 2, 3];

And update the active value. This never mutates but returns a new zip:

const newZip = zip.setActive(2);
You can’t perform that action at this time.