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

  •        44

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.

https://neoziro.github.io/recompact/
https://github.com/neoziro/recompact

Dependencies:

fbjs : ^0.8.16
hoist-non-react-statics : ^2.3.1
object.omit : ^3.0.0
object.pick : ^1.3.0
symbol-observable : ^1.1.0
warning : ^3.0.0

Tags
Implementation
License
Platform

   




Related Projects

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.

recompose - A React utility belt for function components and higher-order components.

  •    Javascript

Recompose is a React utility belt for function components and higher-order components. Think of it like lodash for React.

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-onclickoutside - An onClickOutside wrapper for React components

  •    Javascript

This is a React Higher Order Component (HOC) that you can use with your own React components if you want to have them listen for clicks that occur somewhere in the document, outside of the element itself (for instance, if you need to hide a menu when people click anywhere else on your page). Note that this HOC relies on the .classList property, which is supported by all modern browsers, but not by deprecated and obsolete browsers like IE (noting that Microsoft Edge is not Microsoft Internet Explorer. Edge does not have any problems with the classList property for SVG elements). If your code relies on classList in any way, you want to use a polyfill like dom4.

react-keydown - Lightweight keydown wrapper for React components

  •    Javascript

Use react-keydown as a higher-order component or decorator to pass keydown events to the wrapped component, or call methods directly via designated keys. Good for implementing keyboard navigation or other shortcuts. Consult the API & Reference Documentation or continue reading below for quick start.


react-loadable - :hourglass_flowing_sand: A higher order component for loading components with promises

  •    Javascript

A higher order component for loading components with dynamic imports. So you've got your React app, you're bundling it with Webpack, and things are going smooth. But then one day you notice your app's bundle is getting so big that it's slowing things down.

react-jss - JSS integration for React.

  •    Javascript

React-JSS provides components for JSS as a layer of abstraction. JSS and the default preset are already built in! Try it out in the playground. React-JSS wraps your component with a higher-order component. It injects a classes prop, which is a simple map of rule names and generated class names. It can act both as a simple wrapping function and as an ES7 decorator.

react-hoc-examples - React High Order Components examples

  •    Javascript

React Higher Order Components examples

formik - Build forms in React, without the tears 😭

  •    TypeScript

By colocating all of the above in one place, Formik will keep things organized--making testing, refactoring, and reasoning about your forms a breeze.I (@jaredpalmer) wrote Formik while building a large internal administrative dashboard with @eonwhite. With around ~30 unique forms, it quickly became obvious that we could benefit by standardizing not just our input components but also the way in which data flowed through our forms.

react-fns - Browser API's turned into declarative React components and HoC's

  •    TypeScript

react-fns is a collection of imperative Browser API's turned into declarative React components and higher-order components for lots of common situations.There's a lot more to do. The goal is to standardize almost every Web API on MDN.

react-redux-firebase - Redux bindings for Firebase

  •    Javascript

Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React. The Material Example is deployed to demo.react-redux-firebase.com.

react-sizeme - Make your React Components aware of their width and height!

  •    Javascript

Give your Components the ability to have render logic based on their height and/or width. Responsive design on the Component level. This allows you to create highly reusable components that can adapt to wherever they are rendered. The following configuration options are available. Please see the usage docs for how to pass these configuration values into either the component or higher order function.

react-html5video - A customizeable HTML5 Video React component with i18n and a11y.

  •    Javascript

A customizeable HoC (Higher Order Component) for HTML5 Video that allows custom and configurable controls with i18n and a11y. V2 API has changed and is not backwards compatible. You can find the old documentation here.

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.

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.

formous - Simple and elegant form-handling for React - ABANDONWARE

  •    Javascript

Use the code snippet below as an example to help you get started right away. Formous is a higher-order component that you can use to wrap your component in order to supply it with field validation, error notifications, and form submission handling.

react-sizes - :left_right_arrow: Hoc to easily map window sizes to props.

  •    Javascript

React Sizes is a high-order component with a high performance that transform window sizes (width and height) into props. You can check inside your component, for example, if user's window is less than 480 pixels of width, and add a custom content. It can be very powerful for when you need to display different content for mobile and desktop. But it's not limited to this case. Just use that at your needs.

revalidation - Higher Order Component for Validating Forms in React

  •    Javascript

Revalidation lets you write your forms as stateless function components, taking care of managing the local form state as well as the validation. Revalidation also works with classes and will support other React-like libraries like Preact or Inferno in the future. Form handling sounds trivial sometimes, but let’s just take a second to think about what is involved in the process. We need to define form fields, we need to validate the fields, we also might need to display errors according to the fact if the input validates, furthermore we need to figure out if the validation is instant or only after clicking on a submit button and so on and so forth.

react-overlays - Utilities for creating robust overlay components

  •    Javascript

All of these utilities have been abstracted out of react-bootstrap in order to provide better access to the generic implementations of these commonly needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, css or otherwise. If you are looking for more complete overlays, modals, or tooltips--something you can use right out of the box--check out react-bootstrap, which is (or soon will be) built on using these components.

react-native-webrtc - A WebRTC module for React Native.

  •    Objective-C

A WebRTC module for React Native. the order of commit revision is nothing to do with the order of cherry-picks, for example, the earlier committed cherry-pick-#2 may have higher revision than cherry-pick-#3 and vice versa.






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.