react-powerplug - :electric_plug: Renderless Containers

•    Javascript

---

React PowerPlug is a set of pluggable renderless components and helpers that provides different types of state and logic utilities that you can use with your dumb components. It creates state and passes down the logic to the children, so you can handle your data. Read about the Render Props pattern.

dumb-components dumb state react react-component renderless renderless-components state-container render-props reactjs components

react-mapbox-gl - A React binding of mapbox-gl-js

•    TypeScript

---

If those properties changed at the mapbox-gl-js level and you don't update the value kept in your state, it will be unsynced with the current viewport. At some point you might want to update the viewport value (zoom, pitch or bearing) with the ones in your state but using value equality is not enough. Taking zoom as example, you will still have the unsynced zoom value therefore we can't tell if you want to update the prop or not. In order to explicitly update the current viewport values you can instead break the references of those props and reliably update the current viewport with the one you have in your state to be synced again. Please try to reproduce your problem with the boilerplate before posting an issue.

mapbox-gl-js react-mapbox-gl react mapbox-gl map mapbox webgl react-component

react-adopt - :sunglasses: Compose render props components like a pro

•    TypeScript

---

React Adopt is a simple method that composes multiple render prop components, combining each prop result from your mapper.

react render-props compose

react-contextual - 🚀 react-contextual is a small (less than 1KB) helper around React 16s new context api

•    Javascript

---

Click this link for a detailed explanation. Pass a store (which stores some state and actions to update the state) to Provider. Then receive the props in the store either by using a HOC or render-props.

react context store hoc redux

redux-connect - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React

•    Javascript

---

How do you usually request data and store it to redux state? You create actions that do async jobs to load data, create reducer to save this data to redux state, then connect data to your component or container. Usually it's very similar routine tasks.

react redux-connect server-side-rendering immutablejs react-redux isomorphic universal-react node nodejs redux connect async props

react-table - React Table - A lightweight, fast and extendable datagrid for React

•    Javascript

---

Pro Tip: Using the resolveData prop - Any time the data prop value changes (using a === comparison), the table will update, but sometimes you need to materialize, alter, or shape this data before it enters the table. To do this, you can use the resolveData prop! It recieves the data prop as the only parameter and returns the resolved data. These are all of the available props (and their default values) for the main <ReactTable /> component.

react table datagrid datatable grid react-table

google-map-react - Google map library for react that allows rendering components as markers :tada:

•    Javascript

---

google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server. Additionally, it can render map components in the browser even if the Google Maps API is not loaded. It uses an internal, tweakable hover algorithm - every object on the map can be hovered. The development of this package is sponsored by Atlist. Atlist is a no-code tool for creating custom maps with multiple markers.

react map google component maps reactjs isomorphic render react-component

react-fake-props - 🔮 Simple utility to magically generate fake props for your React tests

•    Javascript

---

react-fake-props parses your Component prop types using react-docgen and generates fake props. Supports Flow and PropTypes. Works great with Jest snapshots and Enzyme.To include optional props, pass { optional: true }.

react test enzyme props proptypes flow fake react-docgen

Valtio - Makes proxy-state simple for React and Vanilla

•    Typescript

---

Valtio turns the object you pass it into a self-aware proxy. You can make changes to it in the same way you would to a normal js-object. Valtio supports React-suspense and will throw promises that you access within a components render function. This eliminates all the async back-and-forth, you can access your data directly while the parent is responsible for fallback state and error handling.

react state easy mutable manager management mobx proxy store react-state-management

react-native-star-rating - A React Native component for generating and displaying interactive star ratings

•    Javascript

---

A React Native component for generating and displaying interactive star ratings. Compatible with both iOS and Android. For the emptyStar, fullStar, halfStar, and iconSet props, please refer to the react-native-vector-icons package for the valid string names for the star icons. When selecting the icon string names, you must remember to remove the font family name before the first hyphen. For example, if you want to use the ion-ios-star from the Ionicon font set, you would set the fullStar prop to ios-star and the iconSet to Ionicons.

star-rating star-rating-component react-native react-native-component custom-star star-icon react-native-star-rating star rating ratings component react native stars review reviews react-component ios android

redux-react-local - local component state via redux

•    Javascript

---

Add the supplied reducer to a key local on your redux store. However, because 'views' don't have global references / identities ala Backbone etc, communicating between these components can get cumbersome 2; we then resort to building some form of messaging system external to these components - callbacks, pubsub channels, flux stores, observable event chains, etc. The smart ones use context to expose these systems to a particular render tree, avoiding 'global' state, but still getting a similar model.

react redux local state

formsy-react-components - A set of React JS components for use in a formsy-react form

•    Javascript

---

formsy-react-components is a selection of React components that render form elements for use in a formsy-react form. The components render markup to be quickly included in a Bootstrap 3 form. This includes a <label>, help text, and some validation styling tied to formsy’s validation state and validation messages.

bootstrap form-controls react-component react-components react formsy-react

React - JavaScript library for building user interfaces

•    Javascript

---

React is a JavaScript library for building user interfaces. Lots of people use React as the V in MVC. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. React can also render on the server using Node and power mobile apps using React Native.

front-end-framework jquery-alternative javascript-framework ui-framework user-interface virtual-dom

downshift - 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components

•    Javascript

---

You need an autocomplete/dropdown/select experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.This is a component that controls user interactions and state for you so you can create autocomplete/dropdown/select/etc. components. It uses a render function as children which gives you maximum flexibility with a minimal API because you are responsible for the rendering of everything and you simply apply props to what you're rendering.

react autocomplete combobox autoselect enhanced-input autosuggest typeahead dropdown select omnibox accessibility wai-aria multiselect multiple-selection

react-native-render-html - iOS/Android pure javascript react-native component that renders your HTML into 100% native views

•    Javascript

---

An iOS/Android pure javascript react-native component that renders your HTML into 100% native views. It's made to be extremely customizable and easy to use and aims at being able to render anything you throw at it. Based on the original work of Thomas Beverley, props to him.

react-native render html styling css customizable ios android react-component react-native-component render-html

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.

ReactStateMuseum - A whirlwind tour of React state management systems by example

•    Javascript

---

Every app is meant to be small, simple, and the same as each other. The only difference should be the state management decisions of each. The repeated React and ReactNative app is a Packing List, with the name based on the state technology.

react react-native redux mobx mobx-state-tree apollographql appsync react-automata unstated freactal state-management unistore apollo appsync-sdk immer microstates pure-store react-observable-store reduxx rematch state museum

proppy - Functional props composition for UI components (supporting React.js & Vue.js)

•    TypeScript

---

ProppyJS is a tiny 1.5kB JavaScript library for composing props (object that components receive to render themselves). It comes with various integration packages giving you the freedom to use it popular rendering libraries.

react vue preact functional-programming props redux rxjs

use-query-params - React Hook for managing state in URL query parameters with easy serialization.

•    TypeScript

---

A React Hook, HOC, and Render Props solution for managing state in URL query parameters with easy serialization. Works with React Router and Reach Router out of the box. TypeScript supported.

react url hooks query reactjs querystring queryparams query-parameters react-hooks

wiretie - A Higher Order Component for Preact that resolves (async) values from a model and passes them down as props

•    Javascript

---

Wiretie is a Higher Order Component for Preact that resolves (async) values from a model and passes them down as props. It lets you wire() components up to data sources. This provides a uniform and streamlined way to write async components that avoids complex side effects within componentDidMount(), and encourages proper instantiability.

wire model connect prop-provider context preact