Skip to content
No description, website, or topics provided.
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
LICENSE
README.md
package.json
tsconfig.json
yarn.lock

README.md

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.

Install

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

API

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:

zip.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.