react-faux-dom
Advanced tools
react-faux-dom - npm Package Compare versions
Comparing version
@@ -0,1 +1,5 @@ | ||
| # 2.5.0 | ||
| * Merge [#41](https://github.com/Olical/react-faux-dom/pull/41) - Adding mixin with animation support (thanks @krawaller!) | ||
| # 2.4.0 | ||
@@ -2,0 +6,0 @@ |
@@ -92,1 +92,18 @@ This library allows you to instantiate a fairly lightweight object that behaves (sort of) like a regular DOM element from your browser. It does not support the whole DOM API, you'll probably want [jsdom][] for that. Instead, it supports a subset which was initially just enough to satisfy [D3][] but this can be expanded easily as desired. Things like jQuery and Backbone can also be used, it just may require some up front tweaking. | ||
| [d3]: http://d3js.org/ | ||
| ## React component mixins | ||
| You also have access to **mixins** which makes it easy to render faux nodes, and to animate them while they're being mutated by a DOM library like for example D3. | ||
| The **core** mixin supplies the following methods: | ||
| * **`connectFauxDOM(node,name)`**: This will store `node` in `this.connectedFauxDOM[name]`, and make an asynchronous call to `drawFauxDOM`. The node can be a faux element or a string, in which case a faux element is instantiated. The node is returned for convenience. A component can have multiple connected nodes. | ||
| * **`drawFauxDOM()`**: This will update component state (causing a render) with virtual DOM (through `node.toReact()`) for all previously `connect`ed faux nodes. Each node's representation will be on `this.state[name]`, where `name` is the one used in the `connect` call. | ||
| If you also add the **anim** mixin then you get: | ||
| * **`animateFauxDOM(duration)`**: This will make a call to `drawFauxDOM` every 16 milliseconds until the duration has expired. | ||
| * **`stopAnimatingFauxDOM()`**: Cancels eventual ongoing animation | ||
| * **`isAnimatingFauxDOM()`**: Returns true or false depending on whether an animation is ongoing. | ||
| The mixins will also take care of the necessary setup and teardown. To see them in action, check out the `animate-d3-with-mixin` mini-app in the `examples` folder. |
| var Element = require('./Element') | ||
| var Window = require('./Window') | ||
| var core = require('./mixins/core') | ||
| var anim = require('./mixins/anim') | ||
@@ -7,2 +9,6 @@ var ReactFauxDOM = { | ||
| defaultView: Window, | ||
| mixins: { | ||
| core: core, | ||
| anim: anim | ||
| }, | ||
| createElement: function (nodeName) { | ||
@@ -9,0 +15,0 @@ return new Element(nodeName) |
| { | ||
| "name": "react-faux-dom", | ||
| "version": "2.4.0", | ||
| "version": "2.5.0", | ||
| "description": "DOM like data structure to be mutated by D3 et al, then rendered to React elements", | ||
@@ -5,0 +5,0 @@ "main": "lib/ReactFauxDOM.js", |
@@ -22,23 +22,22 @@ # react-faux-dom [](http://badge.fury.io/js/react-faux-dom) [](https://travis-ci.org/Olical/react-faux-dom) [](https://github.com/feross/standard) | ||
| It supports a wide range of DOM operations and will fool most libraries but it isn't exhaustive (the full DOM API is ludicrously large). It supports enough to work with D3 but will require you to fork and add to the project if you encounter something that's missing. | ||
| There are also **mixins** available for convenience, giving you a clean API and animation support: | ||
| You can think of this as a bare bones [jsdom][] that's built to bridge the gap between the declarative React and the imperative JavaScript world. We just need to expand it as we go along since jsdom is a huge project that solves different problems. | ||
| ```javascript | ||
| // inside componentWillMount | ||
| var faux = this.connectFauxDOM('div','chart'); | ||
| d3.doingAnAdvancedAnimationFor3secs(faux); | ||
| this.animateFauxDOM(3500); // duration + margin | ||
| I'm trying to keep it light so as not to slow down your render function. I want efficient, declarative and stateless code, but I don't want to throw away previous tools to get there. | ||
| // inside render | ||
| return {this.state.chart}; | ||
| ``` | ||
| ## Limitations | ||
| It's great for... | ||
| ReactFauxDOM supports a wide range of DOM operations and will fool most libraries but it isn't exhaustive (the full DOM API is ludicrously large). It supports enough to work with D3 but will require you to fork and add to the project if you encounter something that's missing. | ||
| * Static D3 components or other such libraries (things like Backbone should work too!) | ||
| * D3 components with simple state and event interaction, like tooltips on charts | ||
| * D3 components such as progress bars that can be animated using [react-motion][], for example | ||
| You can think of this as a bare bones [jsdom][] that's built to bridge the gap between the declarative React and the imperative JavaScript world. We just need to expand it as we go along since jsdom is a huge project that solves different problems. | ||
| It's not so great for... | ||
| I'm trying to keep it light so as not to slow down your render function. I want efficient, declarative and stateless code, but I don't want to throw away previous tools to get there. | ||
| * Physics based D3 components or anything using a lot of DOM mutation and state | ||
| * Linked to the previous one, brushing and filtering of selections using the built in stateful D3 tools | ||
| * Essentially: Anything with a lot of DOM mutation from timers, events or internal state will be hard to use | ||
| If you keep it stateless and React-ish then you'll be fine. Use tools like D3 to fluently build your charts / DOM, don't use it as an animation / physics / DOM mutation library, that doesn't work within React. See the state example linked below for a simple way to handle state, events and D3. | ||
@@ -49,2 +48,3 @@ ## Usage | ||
| * [An example static chart ][lab-chart] ([source][lab-chart-source]) | ||
| * [An example animated chart using the mixin][mixin-example] | ||
| * [A simple example using state and events][lab-state] ([source][lab-state-source]) | ||
@@ -94,1 +94,2 @@ * [d3-react-sparkline][], a small component I built at [Qubit][] | ||
| [react-motion]: https://github.com/chenglou/react-motion | ||
| [mixin-example]: ./examples/animate-d3-with-mixin |
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
49705
32.46%- Number of package files
39
25.81%- Lines of code
1191
32.48%- Number of medium supply chain risk alerts
0
-100%