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

  •        24

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.

https://github.com/javivelasco/react-tunnels

Tags
Implementation
License
Platform

   




Related Projects

react-useportal - 🌀 React hook for Portals

  •    TypeScript

Need to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component (react docs). This hook is also isomorphic, meaning it works with SSR (server side rendering).

loadable-components - React code splitting made easy ✂️✨

  •    Javascript

React code splitting made easy. Reduce your bundle size without stress ✂️✨. Webpack allows modern code splitting via the dynamic import syntax. Loadable Components makes it possible to use that awesome feature with React. It is compatible with react-router and server side rendering. The API is designed to be as simple as possible to avoid useless complexity and boilerplate.

ReactScriptLoader - A library for creating React components that depend on external scripts.

  •    Javascript

ReactScriptLoader simplifies creating React components whose rendering depends on dynamically loaded scripts. It can be used for lazily loading heavy scripts but it's especially useful for loading components that rely on 3rd party scripts, such as Google Maps or Stripe Checkout. React apps are typically single-page apps that are rendered client-side in Javascript. When loading a site built with React, the browser typically pre-loads the javascript necessary to render the site's React components so that they can be rendered with no latency. This works well for sites that serve a relatively small amount of javascript from their own servers in a single bundle. However, in some situations pre-loading all the scripts necessary to render the site's components is impractial. For example, a site may have a Map component that relies on a dynamically loaded 3rd party library to render itself. It may be possible to delay rendering the app until the third party library is finished loading but doing so would make the site feel unnecessarily sluggish. It's a much better strategy to first render the page with a placeholder for the map and asynchronously render the map once the third party library has loaded. Deferring the loading of the external script is even more important when the map component isn't rendered right away but is only revealed after user interaction.

symfony-react-sandbox - Example of integration with React and Webpack (Webpack Encore) for universal (isomorphic) React rendering, using Limenius/ReactBundle and Limenius/LiformBundle

  •    Javascript

This sandbox provides an example of usage of ReactBundle with server and client-side React rendering (universal/isomorphical) and its integration with a fitting Webpack Encore setup. It also provides an example of the usage of LiformBundle to generate a json-schema from Symfony forms and a forms and validation in React from that schema. -Note: If you are new to React.js, please note that this sandbox or the bundle are not by any means required to use React with Symfony. This shocases how to do some advanced features such as Server Side Rendering, a better integration with forms, injecting components directly from Twig tags, that may be difficult.


react_on_rails - Integration of React + Webpack + Rails using rails/webpacker to build Universal (Isomorphic) Apps (aka Server Rendering)

  •    Ruby

React on Rails integrates Rails with (server rendering of) Facebook's React front-end framework. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.

react-breadcrumbs - Automatic breadcrumbs for React-Router

  •    Javascript

React component use to generate a breadcrumb trail (compatible with React Router). The /demo directory provide one example of how this package can be used. See the /demo for the code powering the small site.

react-lifecycles-compat - Backwards compatibility polyfill for React class components

  •    Javascript

React version 17 will deprecate several of the class component API lifecycles: componentWillMount, componentWillReceiveProps, and componentWillUpdate. (Read the Update on Async rendering blog post to learn more about why.) A couple of new lifecycles are also being added to better support async rendering mode. Typically, this type of change would require third party libraries to release a new major version in order to adhere to semver. However, the react-lifecycles-compat polyfill offers a way to use the new lifecycles with older versions of React as well (0.14.9+) so no breaking release is required. This enables shared libraries to support both older and newer versions of React simultaneously.

react-live - A production-focused playground for live editing React components

  •    Javascript

React Live brings you the ability to render React components and present the user with editable source code and live preview. It supports server-side rendering and comes in a tiny bundle, thanks to Bublé and a Prism.js-based editor.The library is structured modularly and lets you style its components as you wish and put them where you want.

reactql - Universal React+GraphQL starter kit: React 16, Apollo 2, Webpack 4, Styled Components 4, React Router 4, PostCSS, SSR

  •    TypeScript

Universal front-end React + GraphQL starter kit, written in Typescript. Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Styled Components, SASS - pretty much anything.

python-react - Server-side rendering of React components

  •    Python

For client-side integrations, refer to the docs. python-react provides an interface to a render server which is capable of rendering React components with data from your python process.

react-canvas - High performance <canvas> rendering for React components

  •    Javascript

React Canvas adds the ability for React components to render to <canvas> rather than DOM. This project is a work-in-progress. Though much of the code is in production on flipboard.com, the React canvas bindings are relatively new and the API is subject to change.

react-pure-render - [No Maintenance Intended] A function, a component and a mixin for React pure rendering

  •    Javascript

This project is no longer actively maintained. It does its job, but there are no plans to extend or change it. We suggest you to use the official react-addons-shallow-compare package instead which does the same job. To wrap functional components in a more expressive way, we encourage you to check out recompose. A function, a component and a mixin for React pure rendering.

react-laravel - Package for using ReactJS with Laravel

  •    PHP

With react-laravel you'll be able to use ReactJS components right from your Blade views, with optional server-side rendering, and use them on the client-side with React due to unobtrusive JavaScript. It's important to know that react-laravel has an indirect dependency of the v8js PHP extension.

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.

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.

react-async-component - Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases

  •    Javascript

Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases. This library does not require that you use either Webpack or Babel. Instead it provides you a generic and "pure" Javascript/React API which allows for the expression of lazy-loaded Components. It's Promise-based API naturally allows you to take advantage of modern code splitting APIs (e.g import(), System.import, require.ensure).

enzyme - JavaScript Testing utilities for React

  •    Javascript

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

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.