react-lifecycle-visualizer - Real-time visualizer for React lifecycle methods

•    Javascript

---

An npm package (react-lifecycle-visualizer) for tracing & visualizing lifecycle methods of arbitrary React components. To trace a component, apply the higher-order component traceLifecycle to it, and all its lifecycle-method calls will show up in a replayable log component. Additionally, traced components may include a <this.props.LifecyclePanel/> element in their rendering to show a panel with lifecycle methods, which are highlighted when the corresponding log entry is selected.

reactjs lifecycle-methods visualizer trace react lifecycle visualize animated

Realize - A React component tree visualizer

•    Javascript

---

As React applications scale, it becomes more difficult to track state and to have a holistic overview of the component hierarchy. Realize is a tool to help developers visualize the structure and state flow of their React applications, especially when they are growing in scale and complexity. It currently supports React v.16.8.

react d3 chrome-extension reactjs firefox-extension fiber

chartify - React.js plugin for building simple animated draggable charts

•    Javascript

---

The source for this module is in the main repo.Container prop is a class that will be added to the chart container element. This is important in case you have more than one chart on your page.

chart charts react barchart linechart timeline timesheet films music-library music-visualizer react-plugins customizable-charts cinematography movie-collection visualization draggable-elements draggable film-ratings rank reactjs react-js react-chart scale items dataset kinopoisk line-chart bar-chart marks axis calendar-view pyramid progress-chart showreel visualisation diagram graph

react-d3-components - D3 Components for React

•    Javascript

---

Let React have complete control over the DOM even when using D3. This way we can benefit from Reacts Virtual DOM. to start a webserver, and navigate to http://localhost:8000/example in order to visualize the new example page. Note that the example page directly points to the dist folder.

react d3 graph chart charting-library charts waveform pie-chart area-chart chart-component visualization react-component

react-tunnels - 🚇 Render React components in placeholders that are placed somewhere else in the component tree

•    Javascript

---

Render React components in placeholders that are placed somewhere else in the component tree. There is a common use case in React apps where you want to define a Layout where the content of some elements is defined by children components. For example, you want to define Layout just once and reuse it for every page but it has a breadcrumb whose steps depend on children components. This tiny library allows you to define tunnels to render from an element to whatever another element in the App, even elements located on top of the tree. It's like Portal but the target is a component instead of a DOM element.

react tunnels react-tunnels inverse-rendering components breadcrumbs portals

tree - React Tree

•    Javascript

---

Tree component. note: if you have a lot of TreeNode, like more than 1000, make the parent node is collapsed by default, will obvious effect, very fast. Because the children hide TreeNode will not insert into dom.

react react-component react-tree tree

Expression Tree Visualizer for VS 2010

•    

---

The entire project is a "visualizer" that displays the expression tree nodes and node attributes. only important attributes are selected to be appended to the visualization tree in order to keep it simple and useful.

debugger-visualizer debugging expression expression-trees lambda visual-studio-2010 visualizer

rxviz - Rx Visualizer - Animated playground for Rx Observables

•    Javascript

---

RxViz simply visualizes a given Observable. Your JavaScript code will be evaluated, and, if the last expression is an Observable, a nice animated visualization will appear. RxViz treats the evaluated Observable as a black box. We rely only on the fact that Observable emits values over time. RxViz doesn't rely on the internals of RxJS. This will allow us to visualize TC39 Observables in the future.

rx observable rxjs reactive stream visualizer visualization svg animation react react-component

react-syntax-highlighter - syntax highlighting component for react with prismjs or highlightjs ast using inline styles

•    Javascript

---

Check out a small demo here and see the component in action highlighting the generated test code here. There are other syntax highlighters for React out there so why use this one? The biggest reason is that all the others rely on triggering calls in componentDidMount and componentDidUpdate to highlight the code block and then insert it in the render function using dangerouslySetInnerHTML or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it is also using more idiomatic React and allows the use of pure function components brought into React as of 0.14.

react syntax lowlight highlighting ast

react-markdown - Markdown component for React

•    Javascript

---

react-markdown is a Markdown component for React using remark. There are other ways for markdown in React out there so why use this one? The two main reasons are that they often rely on dangerouslySetInnerHTML or have bugs with how they handle markdown. react-markdown uses a syntax tree to build the virtual dom which allows for updating only the changing DOM instead of completely overwriting. react-markdown is 100% CommonMark (optionally GFM) compliant and has extensions to support custom syntax.

react markdown gfm remark commonmark

react-vis - Data-Visualization oriented components

•    Javascript

---

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.Install react-vis via npm.

uber chart data-visualization charting-library visualization react d3 es6 babel

react-ui-tree - React tree component

•    Javascript

---

This project was initially developed for a webpage builder. It maintains an internal tree structure within the component through js-tree.

react tree draggable react-component

react-native-pathjs-charts - Android and iOS charts based on react-native-svg and paths-js

•    Javascript

---

This library is a cross-platform (iOS/Android) library of charts/graphs using react-native-svg and paths-js based on the excellent work done by Roman Samec in the react-pathjs-chart library. The project is an early attempt at providing a ubiquitous solution for charts & graphs for React Native that offer a unified view across devices. Components include Pie charts, Bar charts, Smoothline charts, Stockline charts, Scatterplots, Tree graphs and Radar graphs. Since Paths-Js makes no assumptions about rendering, this library is perfect for using SVG path objects to render custom charts easily.

charts graphs paths-js react-native ios android react-native-svg cross-platform radar-graphs bar-graphs pie-graphs tree react-pathjs-chart

react-game-kit - Component library for making games with React & React Native

•    Javascript

---

react-game-kit provides a set of helper components to make it easier to create games with React and React Native.The Loop component uses context to pass a subscribable game tick down your component tree. The Stage component does the same with game scale.

physics-bodies spritesheet tilemap component-tree game react reactjs physics-engine sprite-animation matter

react-google-charts - A thin, typed, React wrapper over Google Charts Visualization and Charts API.

•    TypeScript

---

A thin, typed, React wrapper for Google Charts. Set the chart-specific events you want to listen to and the corresponding callback. The callback has the component as an argument.

react google-charts charts react-google-charts area-chart bar-chart bubble-chart calendar-chart candlestick-chart column-chart donut-chart gantt gantt-chart gauge-chart geochart histogram line-chart org-chart typescript google

reaviz - 📊 Data visualization library for React based on D3

•    TypeScript

---

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

d3js charts data-visualization reactjs dataviz bar-chart area-chart hive-plot scatter-plot map-chart sparkline pie-chart bubble-chart sankey-chart svg heatmap calendar-heatmap react d3.js d3 charting axis brush line-chart sankey pan zoom radial legends

reaviz - 📊 Data visualization library for React based on D3

•    TypeScript

---

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability. If you are looking for node-based graphs, checkout reaflow.

react d3 chart charts euler reactjs heatmap data-visualization venn-diagram data-viz sparkline scatter-plot d3js bubble-chart line-charts bar-charts area-charts hive-plot sankey-chart d3.js dataviz charting svg bar-chart axis brush area-chart line-chart pie-chart sankey pan zoom radial calendar-heatmap legends venn

Recharts - Redefined chart library built with React and D3

•    Javascript

---

Recharts is a Redefined chart library built with React and D3. It can be easily deployed with React components. It has SVG support, lightweight depending only on some D3 submodules. All the components of Recharts are clearly separated.

react charting-library d3 reactjs chart react-component visualization data-visualization charts

tree-select - React Tree Select

•    Javascript

---

note: you'd better to use treeData instead of using TreeNode. rc-tree-select is released under the MIT license.

react react-component react-tree-select tree-select

react-treeview - Easy, light, flexible tree view made with React.

•    Javascript

---

Easy, light, flexible treeview made with React. Demos from the demos folder.

facebook react treeview tree-view tree view treenode tree-node ui react-component