Displaying 1 to 20 from 38 results

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.

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-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-mt-svg-lines - A React.js wrapper component to animate the line stroke in SVGs

  •    Javascript

The component wraps your SVG and animates the stroke-dashoffset property on every path element within. To accomplish this, it injects a style tag with a generated string of CSS. For a description of the technique, see this article. Require MtSvgLines into your component (you can import it under any name)...




react-with-direction - Components to provide and consume RTL or LTR direction in React

  •    Javascript

Components to support both right-to-left (RTL) and left-to-right (LTR) layouts in React.Supporting RTL or switching between different directions can be tricky. Most browsers have built-in support for displaying markup like paragraphs, lists, and tables. But what about interactive or complex custom UI components? In a right-to-left layout, a photo carousel should advance in the opposite direction, and the primary tab in a navigation control should the rightmost, for example.

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-context-utils - Utility lib to manipulate React context easily and use props as much as possible

  •    Javascript

Utility lib to manipulate React context easily and use props as much as possible. You just need to use the ContextProvider component to provide a context to you whole component tree. The context is a good way to provide some global services or actions to your components. It also make testing easier, if you put the provider at the root of the tree, so you can easily provide a test context to your components without changing them.

react-click-outside - Higher Order Component that provides click outside functionality

  •    Javascript

Enhance a React component with a Higher Order Component that provides click outside detection. Note: React 0.14 required for version >= 2.x. This assumes react and react-dom is installed in your project. Continue using version 1.x for React 0.13 support.

react-firebase - React bindings for Firebase

  •    Javascript

React bindings for Firebase. React Firebase requires React 0.14 and Firebase 3 or later.

react-animation-frame - A React higher-order component that invokes a callback in a wrapped component via requestAnimationFrame

  •    Javascript

A React higher-order component for invoking component repeating logic using requestAnimationFrame. It works in both the browser and React Native. The module follows the CommonJS format, so it is compatible with Browserify and Webpack. It also supports ES5 and beyond.

next-nprogress - Next.js HOC to integrate NProgress inside your app

  •    Javascript

Next.js HOC to integrate NProgress inside your app. This is configured to run only after a delay of (default) 300ms. This means if the page change takes too long it will render the progress bar, but if it's fast enough it will avoid rendering it.

react-context-router - Minimal React router based on React context

  •    Javascript

React Router is an excellent routing solution, but sometimes it does a lot more than you need it to. This is intended to be a smaller option with a simpler API. Pass a pathname to the Router component to populate the context for a particular route.

rrx - ⚛️ Minimal React router using higher order components

  •    Javascript

Higher order component to create a wrapper Router component. This component creates a history object and provides context for both history and location. Creates a view component that accepts a pattern prop for route matching. If the location matches the pattern, the component will render with params and search props. If it does not match, it will not render.

react-zap - :zap: Zap props from one React component to another, using React new context API and your existing higher-order components :zap:

  •    TypeScript

One aspect of the new context API which has been much talked about in the community is that it uses the function-as-a-child pattern (also called render props) for its Consumers. This pattern has been positioned by some as an alternative to higher-order components, so the general impression is that you need to choose: either use HoCs or use Render Props. HoCs are not dead! This package allows you to use your trusted and useful HoCs and to plug them into React's new context API.

react-context-props - Decorate React Components so they can get context props as regular props

  •    Javascript

Decorate React Components so they can get context props as regular props. You don't need to use both of these functions: you can just use getContextualizer to generate components that can put props in the context and have components that are already aware of the context consuming those; or you can just use withPropsFromContext to decorate your components so that they can get certain props the regular way or from the context.






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.