From 9785975f77bc02c57390644b4a6123193e8ba04f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Thu, 22 Mar 2018 04:12:02 -0700 Subject: [PATCH] add documentation about JS library usage. fixes #733 Summary: Adds an example of how to use yoga from JavaScript to the documentation pages. Reviewed By: priteshrnandgaonkar Differential Revision: D7354390 fbshipit-source-id: 0dbc08e5341c06b621acd99bfb9ce7e789b67a45 --- .../contents/getting-started/standalone.md | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/website/contents/getting-started/standalone.md b/website/contents/getting-started/standalone.md index b30cc8f2..1b28654b 100644 --- a/website/contents/getting-started/standalone.md +++ b/website/contents/getting-started/standalone.md @@ -18,10 +18,45 @@ dependencies { ### Javascript +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 browesers a pure JS +version is used (corss-compiled using [emscripten](http://kripken.github.io/emscripten-site/)). + ``` $> yarn add yoga-layout ``` +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/master/javascript/sources/entry-common.js#L123). + +```js +import yoga, {Node} from 'yoga-layout'; + +const root = Node.create(); +root.setWidth(500); +root.setHeight(300); +root.setJustifyContent(yoga.JUSTIFY_CENTER); + +const node1 = Node.create(); +node1.setWidth(100); +node1.setHeight(100); + +const node2 = Node.create(); +node2.setWidth(100); +node2.setHeight(100); + +root.insertChild(node1, 0); +root.insertChild(node2, 1); + +root.calculateLayout(500, 300, yoga.DIRECTION_LTR); +console.log(root.getComputedLayout()); +// {left: 0, top: 0, width: 500, height: 300} +console.log(node1.getComputedLayout()); +// {left: 150, top: 0, width: 100, height: 100} +console.log(node2.getComputedLayout()); +// {left: 250, top: 0, width: 100, height: 100} +``` + ### iOS ```