yoga-layout

What is yoga-layout?

The yoga-layout npm package is a cross-platform layout engine that implements Flexbox. It is designed to be fast and efficient, making it suitable for use in performance-critical applications. Yoga-layout allows developers to create complex layouts with ease, using a simple and intuitive API.

What are yoga-layout's main functionalities?

Basic Flexbox Layout

This code demonstrates how to create a basic Flexbox layout using yoga-layout. It creates a root node with two child nodes, sets their dimensions, and calculates the layout.

const { Node, Yoga } = require('yoga-layout');

const root = Node.create();
root.setWidth(500);
root.setHeight(500);

const child1 = Node.create();
child1.setWidth(100);
child1.setHeight(100);
root.insertChild(child1, 0);

const child2 = Node.create();
child2.setWidth(100);
child2.setHeight(100);
root.insertChild(child2, 1);

root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);

console.log(root.getComputedLayout());
console.log(child1.getComputedLayout());
console.log(child2.getComputedLayout());

Align Items

This code demonstrates how to align items within a container using yoga-layout. The root node is set to align its children to the center.

const { Node, Yoga } = require('yoga-layout');

const root = Node.create();
root.setWidth(500);
root.setHeight(500);
root.setAlignItems(Yoga.ALIGN_CENTER);

const child = Node.create();
child.setWidth(100);
child.setHeight(100);
root.insertChild(child, 0);

root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);

console.log(root.getComputedLayout());
console.log(child.getComputedLayout());

Justify Content

This code demonstrates how to justify content within a container using yoga-layout. The root node is set to justify its children to the center.

const { Node, Yoga } = require('yoga-layout');

const root = Node.create();
root.setWidth(500);
root.setHeight(500);
root.setJustifyContent(Yoga.JUSTIFY_CENTER);

const child = Node.create();
child.setWidth(100);
child.setHeight(100);
root.insertChild(child, 0);

root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);

console.log(root.getComputedLayout());
console.log(child.getComputedLayout());

Other packages similar to yoga-layout

flexbox-layout

The flexbox-layout package provides a similar Flexbox layout engine for JavaScript. It is designed to be easy to use and integrates well with web development frameworks. Compared to yoga-layout, flexbox-layout is more focused on web applications and may not be as performant in cross-platform scenarios.

react-native-flexbox

The react-native-flexbox package is a Flexbox layout engine specifically designed for React Native applications. It provides a similar API to yoga-layout but is tailored for use with React Native components. It is a good alternative for developers working within the React Native ecosystem.

css-layout

The css-layout package is another Flexbox layout engine that implements the CSS Flexbox specification. It is designed to be lightweight and fast, making it suitable for performance-critical applications. Compared to yoga-layout, css-layout is more focused on adhering strictly to the CSS Flexbox specification.

README

yoga-layout

This package provides prebuilt WebAssembly bindings for the Yoga layout engine.

Usage

import {Yoga, Align} from 'yoga-layout';

const node = Yoga.Node.create();
node.setAlignContent(Align.Center);

Objects created by Yoga.<>.create() are not automatically garbage collected and should be freed once they are no longer in use.

// Free a config
config.free();

// Free a tree of Nodes
node.freeRecursive();

// Free a single Node
node.free();

Using TypeScript

This package provides out-of-the-box TypeScript typings so long as tsc is configured to support ESM resolution. It is recommended to set moduleResolution: 'bundler' or moduleResolution: node16 in your tsconfig.json according to your environment.

ES Modules

yoga-layout is only provided as an ES Module, relying on top-level await. This allows providing a synchronous API, while still allowing async WebAssembly compilation in browsers, and will allow eventual usage of ESM/WASM interop.

Contributing

Requirements

1. Emscripten SDK
2. CMake >= 3.13
3. (Optional) ninja, for faster builds

Building

git clone https://github.com/facebook/yoga.git
cd yoga/javascript
yarn install
yarn build

Testing

# Build and test all entrypoints
yarn test

# Build and test a specific entrypoint
yarn test:asmjs-sync