Write JSX-driven components with functions, promises and generators.
Documentation is available at crank.js.org. Crank.js is in a beta phase, and some APIs may change. To read more about the motivations for this library, you can read the introductory blog post.
Crank uses the same JSX syntax and diffing algorithm popularized by React, allowing you to write HTML-like code directly in JavaScript.
All components in Crank are just functions or generator functions. No classes, hooks, proxies or template languages are needed.
Crank provides first-class support for promises. You can define components as async functions and race renderings to display fallback UIs.
Crank has no dependencies, and its core is a single file. It currently measures at 4.5KB minified and gzipped.
According to benchmarks, Crank beats React in terms of speed and memory usage, and is currently comparable to Preact or Vue.
The core renderer can be extended to target alternative environments such as WebGL libraries, terminals, smartphones or smart TVs.
Crank is available on NPM in the ESModule and CommonJS formats.
$ npm install @bikeshaving/crank
/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";
renderer.render(<div id="hello">Hello world</div>, document.body);
If your environment does not support ESModules (you may see a message like SyntaxError: Unexpected token export
), you can import the CommonJS versions of the library under the cjs
directory.
/** @jsx createElement */
import {createElement} from "@bikeshaving/crank/cjs";
import {renderer} from "@bikeshaving/crank/cjs/dom";
renderer.render(<div id="hello">Hello world</div>, document.body);
/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";
function Greeting({name = "World"}) {
return (
<div>Hello {name}</div>
);
}
renderer.render(<Greeting />, document.body);
/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";
function *Timer() {
let seconds = 0;
const interval = setInterval(() => {
seconds++;
this.refresh();
}, 1000);
try {
while (true) {
yield <div>Seconds: {seconds}</div>;
}
} finally {
clearInterval(interval);
}
}
renderer.render(<Timer />, document.body);
/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";
async function QuoteOfTheDay() {
const res = await fetch("https://favqs.com/api/qotd");
const {quote} = await res.json();
return (
<p>
“{quote.body}” – <a href={quote.url}>{quote.author}</a>
</p>
);
}
renderer.render(<QuoteOfTheDay />, document.body);
/** @jsx createElement */
import {createElement, Fragment} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";
async function LoadingIndicator() {
await new Promise(resolve => setTimeout(resolve, 1000));
return <div>Fetching a good boy...</div>;
}
async function RandomDog({throttle = false}) {
const res = await fetch("https://dog.ceo/api/breeds/image/random");
const data = await res.json();
if (throttle) {
await new Promise(resolve => setTimeout(resolve, 2000));
}
return (
<a href={data.message}>
<img src={data.message} alt="A Random Dog" width="300" />
</a>
);
}
async function *RandomDogLoader({throttle}) {
for await ({throttle} of this) {
yield <LoadingIndicator />;
yield <RandomDog throttle={throttle} />;
}
}
function *RandomDogApp() {
let throttle = false;
this.addEventListener("click", (ev) => {
if (ev.target.tagName === "BUTTON") {
throttle = !throttle;
this.refresh();
}
});
while (true) {
yield (
<Fragment>
<div>
<button>Show me another dog.</button>
</div>
<RandomDogLoader throttle={throttle} />
</Fragment>
);
}
}
renderer.render(<RandomDogApp />, document.body);