hocs - :bento: A collection of Higher-Order Components for React and React Native

•    Javascript

---

A collection of Higher-Order Components for React, especially useful with Recompose. A Higher-Order Component is a function that takes a component and returns a new component.

react higher-order-component hoc recompose react-native

react-google-maps - React.js Google Maps integration component

•    Javascript

---

The changelog is automatically generated via standard-version and can be found in project root as well as npm tarball. Please, be noted, no one, I mean, no one, is obligated to help you in ANY means. Your time is valuable, so does our contributors. Don't waste our time posting questions like “how do I do X with React-Google-Maps” and “my code doesn't work”. This is not the primary purpose of the issue tracker. Don't abuse.

react google-maps-javascript-api react-styleguidist google map react-component recompose hoc addons/infobox addons/markerclusterer circle directionsrenderer drawing/drawingmanager fusiontableslayer googlemap infowindow kmllayer marker overlayview places/searchbox polygon polyline rectangle streetviewpanorama trafficlayer visualization/heatmaplayer withgooglemap withscriptjs

not-awesome-es6-classes - A curated list of resources on why ES6 (aka ES2015) classes are NOT awesome

•    

---

Reverse-inspired by all of the awesome lists on GitHub, like Awesome, Awesome Awesomeness, Awesome JavaScript, Awesome React, Awesome Cycle.js, Awesome Go, Awesome Elixir, Awesome Elm, etc. While ES6 brings several useful and syntactically pleasing new features to JavaScript, there are many people in the JS community who feel that adding class syntax to the language was a mistake. I share this sentiment, but I have encountered quite a few programmers in the wild who don't agree or simply don't seem to understand why some of us have this opinion. So, I wanted to create an online reference where people could come to learn specifically about this issue and why they might not actually need class syntax in JavaScript.

awesome not-awesome awesome-lists composition functional-programming delegation prototypes class classes es6 es2015 react object-oriented-programming inheritance inferno snabbdom recompose prototypal-inheritance functional-composition

chronos-timetracker - Desktop client for JIRA. Track time, upload worklogs without a hassle.

•    Javascript

---

Desktop client for JIRA. Track time, upload automatic and manual worklogs without a hassle. Cross-platform. Open-sourced. Your working tool kit. Open a tracker, browse tasks, pick what you want to work on and start tracking. Move it to "Done" when you've finished. Without leaving an app.

electron react redux styled-components redux-saga osx flowtype recompose reselect react-virtualized redux-resource atlaskit

css-mat4 - makes a mat4 from translation, rotation, scale, skew

•    Javascript

---

Build a 4x4 matrix from 3D rotation, translation, scale and 2D skew according to the CSS3 transforms spec.Composes a matrix from the given components, storing the result in out and returning it. If opt is not specified, an identity matrix is returned.

rotation translation mat4 matrix 4x4 compose recompose scale skew perspective

recompact - ⚛ A set of React higher-order components utilities. Drop-in replacement for recompose.

•    Javascript

---

Recompact is a set of React higher-order components for reactive programming. It's a drop-in replacement of Recompose with several enhancements. Since tree shaking isn't ready yet to reduce build size efficiently, it is not supported in recompact.

react higher-order-component hoc recompose composition utilities toolkit microcomponentization components higher-order

redux-fusion - React bindings for RxJS and Redux

•    Javascript

---

This module is a higher order component that serves as an alternative to react-redux connect. There is no additional buy in, all of your redux modules and containers can remain as-is. You could even wrap an existing connected component with fuse() if desired. Redux createStore is observable so it is straight forward to access store from root <Provider> context, convert to a state$ observable and subscribe the wrapped component's props via mapPropsStream(). See recompose's Observable utilities for more details.

react rxjs redux recompose

flopflip - 🎚Flip or flop features in your React application in real-time backed by flag provider of your choice 🚦

•    Javascript

---

Toggle (flip or flop) features being stored in Redux or in a broadcasting system (through the context) via a set of React components or HoCs. In summary feature toggling simplifies and speeds up your development processes. You can ship software more often, release to specified target audiences and test features with users (not only internal staff) before releasing them to everyone.

redux react feature-toggles feature-flags recompose launchdarkly splitio lerna rollup continous-delivery hoc store-enhancer

transform-props-with - :repeat: Functional approach to React component reuse

•    Javascript

---

Transform Props With is a functional approach to React component reuse. Compose small testable functions to modify props for components.

react react-native functional-programming functional-js props transformations decorator recompose tx transform

react-matchmedia-connect - Higher order components for matchMedia

•    Javascript

---

createMatchMediaConnect lets you register a set of media queries. If one of the queries changes, you component will be updated. createResponsiveConnect expects a list of breakpoints and creates the respective media queries with createMatchMediaConnect. You'll get a isMin<Size> and isMax<Size> property for each breakpoint as well as a isPortrait and isLandscape property.

matchmedia breakpoint responsive reactjs media-queries react react-component redux recompose

portal-ui - GDC Data Portal UI

•    Javascript

---

We recommend using Node v8 (npm v5). By default the portal will attempt to connect to an api instance running on localhost:5000, however this can changed by setting the environment variable REACT_APP_API, or by setting localStorage.REACT_APP_API in the browser.

react relay redux recompose flow jest d3

hacker-hiring-hunt - 👨‍💻 Tool for searching through Hacker News whoshiring threads

•    Javascript

---

A tool for quickly searching the hacker news whos hiring threads.

hacker-news jsx react recompose

react-compose-events - A Higher-Order Component factory to attach outside event listeners

•    Javascript

---

It is not that common nowadays, but sometimes, when developing for the web, we still need to rely on events that happen on objects out of React application scope; window events, for instance. There are a couple of solutions out there - the most prominent probably being react-event-listener - but none solved this problem in a way such that it would be easy to use with composition libraries such as recompose. react-compose-events does that. Usually you'll need events to fire in a global object, but have them affect the props used on the components. Here goes some example using recompose tools.

react composition recompose events listener

react-motions - Compose React Animations using High-Order Functions or Components

•    CSS

---

React-Motions is a mix of ideas from Recompose and Animate.css. In fact, react-motions is a set of pure functions entirely based on animation purpose. Set last animation with infinity property.

react motions animation recompose css art css3 animate

reassemble - Fast Library for the Composition of React Higher-Order-Components

•    TypeScript

---

reassemble is a library for the composition of React Higher-Order-Components optimized for performance. reassemble is very similar to recompose. Conceptually both projects differ in such way that recompose uses HOCs as their building blocks, whereas reassemble uses Composables which are just a collection of callbacks. Most noticeably using reassemble only results in a single Higher-Order-Component and thus has a significant higher performance. It also solves the problem of Dev Tools Ballooning which is an issue in recompose.

react composition recompose higher-order-component hoc

nextjs-redux-instagram - 🌏 The simple Instagram was written by next.js & redux-saga & recompose

•    Javascript

---

Building by nextjs, redux-saga, recompose. You need going to Instagrm Development register a new client, and you will get Client ID and Client Secret.

redux redux-saga nextjs recompose flowtype higher-order-component

react-gh-like-diff - ➕➖ The react component to generate pretty HTML for comparing commits or text.

•    Javascript

---

Generate Github like comparison based on diff2html. You can compare string or given unified diff to generate pretty HTML.

react diff diff2html comparison compare difference recompose