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

  •        37

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 element in their rendering to show a panel with lifecycle methods, which are highlighted when the corresponding log entry is selected.

https://github.com/Oblosys/react-lifecycle-visualizer#readme
https://github.com/Oblosys/react-lifecycle-visualizer

Dependencies:

hoist-non-react-statics : ^2.5.5
prop-types : ^15.6.1
react-redux : ^5.0.7
redux : ^4.0.0
redux-thunk : ^2.3.0

Tags
Implementation
License
Platform

   




Related Projects

react-lifecycle-methods-diagram - Interactive React Lifecycle Methods diagram.

  •    Javascript

An interactive version of React Lifecycle Methods diagram tweeted by Dan Abramov. Built in React, obviously. I did my best to make the diagram fully accessibile, both for keyboard navigation and screen readers for visually impaired people.

rx-react - ReactJS bindings for RxJS

  •    Javascript

The StateStreamMixin allows to bind a component state to an RxJS Observable stream. The way to achieve the binding is to provide a getStateStream method on your component that returns an RxJS Observable, the StateStream mixin will automatically merge the state of your component with the values published by the returned observable. The subscription will be automaticly cleaned on component unmount. The LifecycleMixin allows you to consume React components lifecycle events as RxJS Observable. The LifecycleMixin will inject a property lifecycle to the component, that property contains an observable for each lifecycle events.

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.

redux-firestore - Redux bindings for Firestore

  •    Javascript

This assumes you are using npm as your package manager. It is common to make react components "functional" meaning that the component is just a function instead of being a class which extends React.Component. This can be useful, but can limit usage of lifecycle hooks and other features of Component Classes. recompose helps solve this by providing Higher Order Component functions such as withContext, lifecycle, and withHandlers.

react-ionize - A React renderer for building your entire Electron app

  •    Javascript

react-ionize is a library which lets you build the "non-browser" parts of an Electron app using React components to manage your application's state. Electron applications consist of two types of process: a main process which manages the lifecycle of the application, and several renderer processes, which display webpages which comprise the application's GUI. While it's fairly common to use React and ReactDOM to build an HTML/CSS/JS interface in the renderer process, react-ionize runs in the main process, managing things like window size/position, menu contents, and application-wide events.


d3act - d3 with React

  •    Javascript

d3 has been the de facto standard when it comes to data visualisations for a while now and React has recently emerged as the go-to library for building user interfaces. d3 and React are both data-centric libraries, making them a natural fit; d3 takes a data-driven approach and React aims to solve the problem of data changing over time in the context of building large applications. Nicolas Hery's "Integrating D3.js visualizations in a React app" talks about letting d3 do all the work after React has finished rendering components in the DOM. d3act is inspired by @nicolas_hery's approach; create a lightweight React component wrapper that maps React's lifecycle methods componentDidMount, componentDidUpdate and componentWillUnmount into a d3 chart's create, update and unmount methods respectively.

redial - Universal data fetching and route lifecycle management for React etc.

  •    Javascript

Universal data fetching and route lifecycle management for React etc. When using something like React Router, you'll want to ensure that all data for a set of routes is prefetched on the server before attempting to render.

react-stripe-elements - React components for Stripe.js and Stripe Elements

  •    Javascript

React components that help you quickly add Stripe Elements to your React app.This project is a thin React wrapper around Stripe.js and Stripe Elements. It allows you to add Elements to any React app, and manages the state and lifecycle of Elements for you.

react-fix-it - Automagically generate tests from errors

  •    Javascript

Automagically generate tests from errors. ⚠️ This package uses react-component-errors to wrap the lifecycle methods into a try...catch block, which affects the performance of your components. Therefore it should not be used in production.

redux-router - Redux bindings for React Router – keep your router state inside your Redux store

  •    Javascript

Redux bindings for React Router. React Router is a fantastic routing library, but one downside is that it abstracts away a very crucial piece of application state — the current route! This abstraction is super useful for route matching and rendering, but the API for interacting with the router to 1) trigger transitions and 2) react to state changes within the component lifecycle leaves something to be desired.

Inferno - An extremely fast, React-like JavaScript library for building modern user interfaces

  •    Javascript

Inferno is an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client and server. Inferno aims to provide all the great benefits that React does, plus other great features for people already familiar with the React ecosystem, such as: lifecycle events on functional components, server side render streams, better real-world performance, lower memory consumption and faster parse/load times.

react-mixin - mixins in react with es6 style classes

  •    Javascript

React doesn't have anything built in for this, but don't worry! This package implements react's mixin strategy for arbitrary objects. 90% of the time you don't need mixins, in general prefer composition via high order components. For the 10% of the cases where mixins are best (e.g. PureRenderMixin and react-router's Lifecycle mixin), this library can be very useful.

react-event-listener - A React component for binding events on the global scope. :dizzy:

  •    Javascript

A React component for binding events on the global scope. This module provides a declarative way to bind events to a global EventTarget. It's using the React lifecycle to bind and unbind at the right time.

Foreman - Complete Lifecycle Management Tool for Physical and Virtual Servers

  •    Ruby

Foreman is a complete lifecycle management tool for physical and virtual servers. It helps system administrators manage servers throughout their lifecycle, from provisioning and configuration to orchestration and monitoring. Using Puppet or Chef and Foreman's smart proxy architecture, you can easily automate repetitive tasks, quickly deploy applications, and proactively manage change, both on-premise with VMs and bare-metal or in the cloud.

android-lifecycle - A diagram of the Android Activity / Fragment lifecycle

  •    

After struggling with trying to figure out how various pieces fit together, I've done some research and put together the complete Android Activity/Fragment lifecycle chart. This has two parallel lifecycles (activities and fragments) which are organized vertically by time. Lifecycle stages will occur in the vertical order in which they're displayed, across activities and fragments. In this way, you can see how your fragments interact with your activities. If you see any discrepancies or errors in this diagram, please submit a pull request or contact steve@staticfree.info.

component - Declarative version of React.Component

  •    HTML

Declarative version of React.Component. Because sometimes you want a lifecycle or some state but don't want to create a new component. Also, this stuff is composable as heck.

governator - Governator is a library of extensions and utilities that enhance Google Guice to provide: classpath scanning and automatic binding, lifecycle management, configuration to field mapping, field validation and parallelized object warmup

  •    Java

Governator is a library of extensions and utilities that enhance Google Guice to provide injector lifecycle and well as support for object lifecycle via @PostConstruct and @PreDestory.Governator binaries are published to Maven Central. Please see the docs for details.

RxGroups - Easily group RxJava Observables together and tie them to your Android Activity lifecycle

  •    Java

RxGroups lets you group RxJava Observables together in groups and tie them to your Android lifecycle. This is especially useful when used with Retrofit.For simple scenarios you can probably just let the original request be cancelled and fire a new one. However it's easy to see how this becomes a problem in more complex situations.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.