@types/yoga-layout

What is @types/yoga-layout?

@types/yoga-layout provides TypeScript type definitions for the yoga-layout library, which is a cross-platform layout engine that implements Flexbox. It is used to calculate the layout of user interfaces in a consistent and efficient manner.

What are @types/yoga-layout's main functionalities?

Basic Layout Calculation

This feature allows you to create a basic layout node, set its dimensions, and calculate its layout. The computed layout can then be retrieved and used.

const yoga = require('yoga-layout');
const node = yoga.Node.create();
node.setWidth(100);
node.setHeight(100);
node.calculateLayout(500, 500, yoga.DIRECTION_LTR);
console.log(node.getComputedLayout());

Flexbox Properties

This feature demonstrates how to use Flexbox properties such as flex direction, justify content, and align items to control the layout of nodes.

const yoga = require('yoga-layout');
const node = yoga.Node.create();
node.setFlexDirection(yoga.FLEX_DIRECTION_ROW);
node.setJustifyContent(yoga.JUSTIFY_CENTER);
node.setAlignItems(yoga.ALIGN_CENTER);
node.calculateLayout(500, 500, yoga.DIRECTION_LTR);
console.log(node.getComputedLayout());

Nested Layouts

This feature shows how to create nested layouts by inserting child nodes into parent nodes. The layout of both parent and child nodes can be calculated and retrieved.

const yoga = require('yoga-layout');
const parent = yoga.Node.create();
const child = yoga.Node.create();
parent.insertChild(child, 0);
parent.setWidth(500);
parent.setHeight(500);
child.setWidth(100);
child.setHeight(100);
parent.calculateLayout(500, 500, yoga.DIRECTION_LTR);
console.log(parent.getComputedLayout());
console.log(child.getComputedLayout());

Other packages similar to @types/yoga-layout

flexbox-layout

flexbox-layout is another library that provides a Flexbox-based layout engine. It is similar to yoga-layout in that it allows for the creation and calculation of layouts using Flexbox properties. However, it may have different performance characteristics and API design.

react-native-flexbox

react-native-flexbox is a package specifically designed for React Native applications. It provides Flexbox layout capabilities similar to yoga-layout but is tightly integrated with the React Native ecosystem, making it easier to use in React Native projects.

css-layout

css-layout is an older library that also implements Flexbox layout calculations. It is similar to yoga-layout but may not be as actively maintained or feature-rich. It can be used as an alternative for basic Flexbox layout needs.

README

Installation

npm install --save @types/yoga-layout

Summary

This package contains type definitions for yoga-layout (https://github.com/facebook/yoga#readme).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/yoga-layout.

Additional Details

• Last updated: Tue, 07 Nov 2023 15:11:36 GMT
• Dependencies: none

Credits

These definitions were written by tnobody.