DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Update standalone JS docs (#1342)

Browse Source 
Summary:
Excited to see some activity around this project! The move from Flow to TypeScript broke one of the links in the documentation, which this PR fixes. I went ahead and updated the example code as well, since it looks like some things moved around since the switch to the async loader.

Pull Request resolved: https://github.com/facebook/yoga/pull/1342

Reviewed By: yungsters

Differential Revision: D48337554

Pulled By: NickGerleman

fbshipit-source-id: 8397cab60cf2104e271029a235f287a179ece2f4
This commit is contained in:
Roland Crosby
2023-08-14 21:20:59 -07:00
committed by Facebook GitHub Bot
parent ef5784aca6
commit 910adaa5dc
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
website/contents/getting-started/standalone.md
View File

@@ -20,36 +20,37 @@ dependencies {
The JavaScript bindings for Yoga can be used from node.js and within the browser. The JavaScript bindings for Yoga can be used from node.js and within the browser.
When using Yoga from node.js the native library is used, in browsers a pure JS When using Yoga from node.js the native library is used, in browsers a pure JS
version is used (cross-compiled using [emscripten](http://kripken.github.io/emscripten-site/)). version is used (cross-compiled using [emscripten](https://emscripten.org/)).
``` ```
$> yarn add yoga-layout $> yarn add yoga-layout
``` ```
This is an example on how to use Yoga in JavaScript, for a full API reference, This is an example on how to use Yoga in JavaScript. For a full API reference,
have a look at the [flow-type definitions](https://github.com/facebook/yoga/blob/main/javascript/sources/entry-common.js#L123). have a look at the [TypeScript type definitions](https://github.com/facebook/yoga/blob/main/javascript/src/wrapAssembly.d.ts).
```js ```js
import yoga, {Node} from 'yoga-layout'; import {loadYoga} from 'yoga-layout';
const root = Node.create(); const Yoga = await loadYoga();
const root = Yoga.Node.create();
root.setWidth(500); root.setWidth(500);
root.setHeight(300); root.setHeight(300);
root.setJustifyContent(yoga.JUSTIFY_CENTER); root.setJustifyContent(Yoga.JUSTIFY_CENTER);
root.setFlexDirection(yoga.FLEX_DIRECTION_ROW); root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
const node1 = Node.create(); const node1 = Yoga.Node.create();
node1.setWidth(100); node1.setWidth(100);
node1.setHeight(100); node1.setHeight(100);
const node2 = Node.create(); const node2 = Yoga.Node.create();
node2.setWidth(100); node2.setWidth(100);
node2.setHeight(100); node2.setHeight(100);
root.insertChild(node1, 0); root.insertChild(node1, 0);
root.insertChild(node2, 1); root.insertChild(node2, 1);
root.calculateLayout(500, 300, yoga.DIRECTION_LTR); root.calculateLayout(500, 300, Yoga.DIRECTION_LTR);
console.log(root.getComputedLayout()); console.log(root.getComputedLayout());
// {left: 0, top: 0, width: 500, height: 300} // {left: 0, top: 0, width: 500, height: 300}
console.log(node1.getComputedLayout()); console.log(node1.getComputedLayout());