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

Related tags

React recompose
Overview

A Note from the Author (acdlite, Oct 25 2018):

Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today, we announced a proposal for Hooks. Hooks solves all the problems I attempted to address with Recompose three years ago, and more on top of that. I will be discontinuing active maintenance of this package (excluding perhaps bugfixes or patches for compatibility with future React releases), and recommending that people use Hooks instead. Your existing code with Recompose will still work, just don't expect any new features. Thank you so, so much to @wuct and @istarkov for their heroic work maintaining Recompose over the last few years.

Read more discussion about this decision here.


Recompose

build status coverage code climate npm version npm downloads

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

Full API documentation - Learn about each helper

Recompose Base Fiddle - Easy way to dive in

npm install recompose --save

📺 Watch Andrew's talk on Recompose at React Europe. (Note: Performance optimizations he speaks about have been removed, more info here)

Related modules

recompose-relay — Recompose helpers for Relay

You can use Recompose to...

...lift state into functional wrappers

Helpers like withState() and withReducer() provide a nicer way to express state updates:

const enhance = withState('counter', 'setCounter', 0)
const Counter = enhance(({ counter, setCounter }) =>
  <div>
    Count: {counter}
    <button onClick={() => setCounter(n => n + 1)}>Increment</button>
    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
  </div>
)

Or with a Redux-style reducer:

const counterReducer = (count, action) => {
  switch (action.type) {
  case INCREMENT:
    return count + 1
  case DECREMENT:
    return count - 1
  default:
    return count
  }
}

const enhance = withReducer('counter', 'dispatch', counterReducer, 0)
const Counter = enhance(({ counter, dispatch }) =>
  <div>
    Count: {counter}
    <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
    <button onClick={() => dispatch({ type: DECREMENT })}>Decrement</button>
  </div>
)

...perform the most common React patterns

Helpers like componentFromProp() and withContext() encapsulate common React patterns into a simple functional interface:

const enhance = defaultProps({ component: 'button' })
const Button = enhance(componentFromProp('component'))

<Button /> // renders <button>
<Button component={Link} /> // renders <Link />
const provide = store => withContext(
  { store: PropTypes.object },
  () => ({ store })
)

// Apply to base component
// Descendants of App have access to context.store
const AppWithContext = provide(store)(App)

...optimize rendering performance

No need to write a new class just to implement shouldComponentUpdate(). Recompose helpers like pure() and onlyUpdateForKeys() do this for you:

// A component that is expensive to render
const ExpensiveComponent = ({ propA, propB }) => {...}

// Optimized version of same component, using shallow comparison of props
// Same effect as extending React.PureComponent
const OptimizedComponent = pure(ExpensiveComponent)

// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)

...interoperate with other libraries

Recompose helpers integrate really nicely with external libraries like Relay, Redux, and RxJS

const enhance = compose(
  // This is a Recompose-friendly version of Relay.createContainer(), provided by recompose-relay
  createContainer({
    fragments: {
      post: () => Relay.QL`
        fragment on Post {
          title,
          content
        }
      `
    }
  }),
  flattenProp('post')
)

const Post = enhance(({ title, content }) =>
  <article>
    <h1>{title}</h1>
    <div>{content}</div>
  </article>
)

...build your own libraries

Many React libraries end up implementing the same utilities over and over again, like shallowEqual() and getDisplayName(). Recompose provides these utilities for you.

// Any Recompose module can be imported individually
import getDisplayName from 'recompose/getDisplayName'
ConnectedComponent.displayName = `connect(${getDisplayName(BaseComponent)})`

// Or, even better:
import wrapDisplayName from 'recompose/wrapDisplayName'
ConnectedComponent.displayName = wrapDisplayName(BaseComponent, 'connect')

import toClass from 'recompose/toClass'
// Converts a function component to a class component, e.g. so it can be given
// a ref. Returns class components as is.
const ClassComponent = toClass(FunctionComponent)

...and more

API docs

Read them here

Flow support

Read the docs

Translation

Traditional Chinese

Why

Forget ES6 classes vs. createClass().

An idiomatic React application consists mostly of function components.

const Greeting = props =>
  <p>
    Hello, {props.name}!
  </p>

Function components have several key advantages:

  • They help prevent abuse of the setState() API, favoring props instead.
  • They encourage the "smart" vs. "dumb" component pattern.
  • They encourage code that is more reusable and modular.
  • They discourage giant, complicated components that do too many things.
  • They allow React to make performance optimizations by avoiding unnecessary checks and memory allocations.

(Note that although Recompose encourages the use of function components whenever possible, it works with normal React components as well.)

Higher-order components made easy

Most of the time when we talk about composition in React, we're talking about composition of components. For example, a <Blog> component may be composed of many <Post> components, which are composed of many <Comment> components.

Recompose focuses on another unit of composition: higher-order components (HoCs). HoCs are functions that accept a base component and return a new component with additional functionality. They can be used to abstract common tasks into reusable pieces.

Recompose provides a toolkit of helper functions for creating higher-order components.

Should I use this? Performance and other concerns

Usage

All functions are available on the top-level export.

import { compose, mapProps, withState /* ... */ } from 'recompose'

Note: react is a peer dependency of Recompose. If you're using preact, add this to your webpack.config.js:

resolve: {
  alias: {
    react: "preact"
  }
}

Composition

Recompose helpers are designed to be composable:

const BaseComponent = props => {...}

// This will work, but it's tedious
let EnhancedComponent = pure(BaseComponent)
EnhancedComponent = mapProps(/*...args*/)(EnhancedComponent)
EnhancedComponent = withState(/*...args*/)(EnhancedComponent)

// Do this instead
// Note that the order has reversed — props flow from top to bottom
const enhance = compose(
  withState(/*...args*/),
  mapProps(/*...args*/),
  pure
)
const EnhancedComponent = enhance(BaseComponent)

Technically, this also means you can use them as decorators (if that's your thing):

@withState(/*...args*/)
@mapProps(/*...args*/)
@pure
class Component extends React.Component {...}

Optimizing bundle size

Since 0.23.1 version recompose got support of ES2015 modules. To reduce size all you need is to use bundler with tree shaking support like webpack 2 or Rollup.

Using babel-plugin-lodash

babel-plugin-lodash is not only limited to lodash. It can be used with recompose as well.

This can be done by updating lodash config in .babelrc.

 {
-  "plugins": ["lodash"]
+  "plugins": [
+    ["lodash", { "id": ["lodash", "recompose"] }]
+  ]
 }

After that, you can do imports like below without actually including the entire library content.

import { compose, mapProps, withState } from 'recompose'

Debugging

It might be hard to trace how does props change between HOCs. A useful tip is you can create a debug HOC to print out the props it gets without modifying the base component. For example:

make

const debug = withProps(console.log)

then use it between HOCs

const enhance = compose(
  withState(/*...args*/),
  debug, // print out the props here
  mapProps(/*...args*/),
  pure
)

Who uses Recompose

If your company or project uses Recompose, feel free to add it to the official list of users by editing the wiki page.

Recipes for Inspiration

We have a community-driven Recipes page. It's a place to share and see recompose patterns for inspiration. Please add to it! Recipes.

Feedback wanted

Project is still in the early stages. Please file an issue or submit a PR if you have suggestions! Or ping me (Andrew Clark) on Twitter.

Getting Help

For support or usage questions like “how do I do X with Recompose” and “my code doesn't work”, please search and ask on StackOverflow with a Recompose tag first.

We ask you to do this because StackOverflow has a much better job at keeping popular questions visible. Unfortunately good answers get lost and outdated on GitHub.

Some questions take a long time to get an answer. If your question gets closed or you don't get a reply on StackOverflow for longer than a few days, we encourage you to post an issue linking to your question. We will close your issue but this will give people watching the repo an opportunity to see your question and reply to it on StackOverflow if they know the answer.

Please be considerate when doing this as this is not the primary purpose of the issue tracker.

Help Us Help You

On both websites, it is a good idea to structure your code and question in a way that is easy to read to entice people to answer it. For example, we encourage you to use syntax highlighting, indentation, and split text in paragraphs.

Please keep in mind that people spend their free time trying to help you. You can make it easier for them if you provide versions of the relevant libraries and a runnable small project reproducing your issue. You can put your code on JSBin or, for bigger projects, on GitHub. Make sure all the necessary dependencies are declared in package.json so anyone can run npm install && npm start and reproduce your issue.

Comments
  • RFC: Update middleware

    RFC: Update middleware

    As mapPropsStream shows, many (most?) higher-order components can be described in terms of a props stream transformation. If multiple such higher-order components are composed together, we reduce the number of components by composing the transformations together instead, which should be more lightweight than sending props through React's update system at each level. In other words, the following two forms are equivalent:

    // Wraps the base component in three container components
    compose(
      mapPropsStream(transformA),
      mapPropsStream(transformB),
      mapPropsStream(transformC)
    )(BaseComponent)
    
    // Same as this, which wraps the base component in a single
    // container component
    mapPropsStream(
      compose(transformA, transformB, transformC)
    )(BaseComponent)
    

    But we don't want to require that Recompose users include an observable pollyfill. Instead, I'm proposing a lightweight abstraction called "update middleware" which will serve the same purpose.

    So far, I've implemented withState and withHandlers using this pattern.

    If we go in this direction, we will modify the compose function to detect HOCs defined using middleware and compose them using the second strategy from the example above.

    opened by acdlite 41
  • Merge rx-recompose into main project

    Merge rx-recompose into main project

    • [x] No RxJS dependency. Uses observables that conform to Observable spec and implement Symbol.observable.
    • [x] Configurable interop with stream libraries like RxJS, most, xstream, and Bacon
    • [x] Renames createComponent to componentFromStream
    opened by acdlite 39
  • Flow typings

    Flow typings

    This PR is a proof of concept and is not meant to be merged.

    There are not many examples of HOC typings with Flow out there, so I thought to write this POC. I hope is helpful as a starting point for an official recompose libdef.

    Feedback from recompose + flow users would be much appreciated.

    opened by gcanti 36
  • tie together `setDisplayName`+`wrapDisplayName`+`getDisplayName`

    tie together `setDisplayName`+`wrapDisplayName`+`getDisplayName`

    Hi.

    setDisplayName, wrapDisplayName, and getDisplayName are powerful utilities. But IMHO there should be a utility function that ties them all together for a very common scenario.

    The most common pattern I see around naming HOCs is WrappingComponent(WrappedComponent)

    so now, in order to give that name to WrappingComponent I need to use all three utility functions and to do:

    import { setDisplayName, wrapDisplayName, getDisplayName } from 'recompose';
    
    var newDisplayName = wrapDisplayName(WrappedComponent, getDisplayName(WrappingComponent));
    setDisplayName(newDisplayName)(WrappingComponent);
    

    So, two there are two things that are left to be desired here IMHO

    1. That wrapDisplayName calls getDisplayName internally for WrappedComponent but not for WrappingComponent (which is why I have to use getDisplayName in the user code for that). This could be modified so that wrapDisplayName will be able to accept a component as the 2nd parameter as well (an overload of sorts), and internally call getDisplayName on it. This is a pretty low-risk breaking change because right now wrapDisplayName expects only a string, so modifying this should extend wrapDisplayName, not break it (and getDisplayName already returns a string if it gets a string).
    2. That there will be a single method that accepts 2 components: the WrappingComponent reference and the WrappedComponent reference, will calculate the WrappingComponent(WrappedComponent) name and set it as the new name for WrappingComponent. This could be a new utility called setWrappedDisplayName`. For example:
    import { setWrappedDisplayName } from 'recompose';
    
    setWrappedDisplayName(WrappingComponent, WrappedComponent);
    //the displayName of WrappingComponent is now WrappingComponent(WrappedComponent)
    

    Would be happy to try to send in a PR if we can decide on the necessary changes.

    Thanks!

    help wanted 
    opened by cowchimp 33
  • FlowTyped HOCs across files

    FlowTyped HOCs across files

    I'm essentially trying to create a file with a reusable HOC called withNavbar, it is just a setStatic with a few defaults.

    This may be a misunderstanding of mine, but I'm seeing the following and can't understand why;

    ./with-navbar.js

    // @flow
    import { setStatic } from 'recompose';
    
    const withNavbar = (title: string) =>
      setStatic('navigationOptions', {
        headerTitle: title,
      });
    
    export default withNavbar;
    

    ./screen.js

    // @flow
    import React from 'react';
    import { compose, withStateHandlers, type HOC } from 'recompose';
    import { Text } from '../styles/components';
    import withNavbar from './with-navbar';
    
    const Test = props => <Text>{props.num}</Text>;
    
    const enhance: HOC<*, {}> = compose(
      withNavbar('MyCounter'),
      withStateHandlers({ num: 1 }, { onSetNum: () => (num: number) => ({ num }) })
    );
    
    export default enhance(Test);
    

    When I remove withNavbar('MyCounter') OR move the code in ./with-navbar.js to the top of the screen.js file, I get all the inferred props. However with it, props are empty.

    opened by kirkness 27
  • [0.25.0 update] createEagerFactory production only error

    [0.25.0 update] createEagerFactory production only error

    after update to 0.25.0 start getting

    Error walking your react tree
    TypeError: Class constructor OnMount cannot be invoked without 'new'
    at createEagerElementUtil (/app/node_modules/recompose/utils/createEagerElementUtil.js:18:12)
    at /app/node_modules/recompose/createEagerFactory.js:18:49
    at ShouldUpdate.render (/app/node_modules/recompose/shouldUpdate.js:45:16)
    at /app/node_modules/react-tree-walker/commonjs/index.js:148:35
    at doTraverse (/app/node_modules/react-tree-walker/commonjs/index.js:78:21)
    

    was all fine on 0.24.0

    OnMount component is pretty plain

    export default (timeout = 0) => BaseComponent =>
      class OnMount extends PureComponent {
        state = { isMounted: false };
    
        componentDidMount() {
          this.mounted = true;
          setTimeout(() => {
            if (this.mounted) {
              this.setState({ isMounted: true });
            }
          }, timeout);
        }
    
        componentWillUnmount() {
          this.mounted = false;
        }
    
        mouted = false;
    
        render = () =>
          <BaseComponent isMounted={this.state.isMounted} {...this.props} />;
      };
    
    
    help wanted 
    opened by dlebedynskyi 27
  • Allow to call internal handlers within withHandlers

    Allow to call internal handlers within withHandlers

    I like the idea described here #333 BTW seems like author don't want to finish it.

    The idea is to allow to call internal handlers within withHandlers, as for now it's not a rare case for me to create a chain of withHandlers just to allow reuse some handlers.

    Usage example

    withHandlers({
        selfHandler: props => val => {
          selfHandlerCallSpy({ props, val })
        },
        handler: (_, { selfHandler }) => val => {
          selfHandler(val) // it works
        },
    })
    

    Before to do that I did:

    withHandlers({
        selfHandler: props => val => {
          selfHandlerCallSpy({ props, val })
        },
    }),
    withHandlers({
        handler: ({ selfHandler }) => val => {
          selfHandler(val) // it works
        },
    })
    

    BTW I'm not sure do we need this or not, as even I like the idea I'm pretty happy with withHandlers chain

    enhancement help wanted 
    opened by istarkov 24
  • withState state updater callback function does not return value

    withState state updater callback function does not return value

    Maybe I'm not doing it right, but based on the documentation I am able to provide a callback function to state updater that is executed after component re-render.

    Both forms accept an optional second parameter, a callback function that will be executed once setState() is completed and the component is re-rendered.

    I would assume that I will get the new state value (just like with setState's callback). Or that props would be already changed to reflect new state since it's called after re-render.

    I can't make it work; here's a JS bin with the issue: https://jsbin.com/pobonu/edit?js,console,output Is my implementation/assumption wrong or something's wrong with recompose?

    opened by plakak 20
  • Breaking changes in 0.23.2/0.23.3

    Breaking changes in 0.23.2/0.23.3

    Initial findings on our end are showing that 0.23.2/0.23.3 includes breaking changes - per https://github.com/callemall/material-ui/issues/6848

    looks like this should've at least been a minor version and not a patch.

    opened by reidblomquist 20
  • add flattenProps

    add flattenProps

    found a need for this when a relay container has multiple fragments.

    this would amplify the possibility of prop name collisions, but not any more so than calling flattenProp twice.

    opened by alex-wilmer 20
  • How to access props from lifecycle?

    How to access props from lifecycle?

    In my current component, the lifecycle methods call methods in props. For example,

          componentWillMount() {
            this.props.onEnterScreen();
          }
      
          componentDidMount() {
            this.props.toggleModal();
          }
    

    Now I want to rewrite it using recompose's lifecycle as shown below, how do I access the props?

    lifecycle({
          componentWillMount() {
            props.onEnterScreen(); // <-- props is not defined
          },
    })
    
    opened by ChenLi0830 20
  • This is GITHUB and not the European Parliament or NATO.

    This is GITHUB and not the European Parliament or NATO.

    Hi,

    Please don't mix politics, ideology or individual thoughts with software development, open source and github. This is ridiculous, so please ask someone responsible to remove this text.

    image

    opened by samyan 0
  • Bump codecov from 1.0.1 to 3.8.3

    Bump codecov from 1.0.1 to 3.8.3

    Bumps codecov from 1.0.1 to 3.8.3.

    Release notes

    Sourced from codecov's releases.

    v3.8.3

    Fixes

    • #329 fix: Test if response has two lines

    Dependencies

    • #306 Bump eslint-config-prettier from 7.2.0 to 8.3.0
    • #305 Bump eslint from 7.21.0 to 7.25.0
    • #302 Bump mock-fs from 4.13.0 to 4.14.0
    • #308 Bump lodash from 4.17.19 to 4.17.21
    • #309 Bump ignore-walk from 3.0.3 to 3.0.4
    • #310 Bump hosted-git-info from 2.8.8 to 2.8.9
    • #325 Bump prettier from 2.2.1 to 2.3.2
    • #326 Bump actions/setup-node from 2.1.5 to 2.2.0
    • #328 Bump lint-staged from 10.5.4 to 11.0.1
    • #330 Bump eslint from 7.25.0 to 7.31.0
    • #331 Bump ws from 7.3.1 to 7.5.3
    • #332 Bump urlgrey from 0.4.4 to 1.0.0
    • #334 Bump husky from 6.0.0 to 7.0.1
    • #333 Bump teeny-request from 7.0.1 to 7.1.1

    v3.8.2

    3.8.2

    Fixes

    • #304 Add coverage-final.json as a possible coverage file during file lookup

    v3.8.1

    Fixes

    • #246 Revert "Bump teeny-request from 6.0.1 to 7.0.0"

    v3.8.0

    Features

    • #160 Add Github Actions support

    Fixes

    • #173 Fix broken gcov command
    • #195 Update Node testing versions
    • #200 Remove flaky tests
    • #204 Create CHANGELOG and remove flaky v4 test
    • #208 Add license scan report and status
    • #220 Remove errant bitly

    Dependencies

    • #189 Bump lint-staged from 10.0.7 to 10.2.11
    • #190 [Security] Bump handlebars from 4.5.3 to 4.7.6
    • #191 Bump prettier from 1.19.1 to 2.0.5
    • #192 Bump mock-fs from 4.10.4 to 4.12.0
    • #196 Bump teeny-request from 6.0.1 to 7.0.0

    ... (truncated)

    Changelog

    Sourced from codecov's changelog.

    3.8.3

    Fixes

    • #329 fix: Test if response has two lines

    Dependencies

    • #306 Bump eslint-config-prettier from 7.2.0 to 8.3.0
    • #305 Bump eslint from 7.21.0 to 7.25.0
    • #302 Bump mock-fs from 4.13.0 to 4.14.0
    • #308 Bump lodash from 4.17.19 to 4.17.21
    • #309 Bump ignore-walk from 3.0.3 to 3.0.4
    • #310 Bump hosted-git-info from 2.8.8 to 2.8.9
    • #325 Bump prettier from 2.2.1 to 2.3.2
    • #326 Bump actions/setup-node from 2.1.5 to 2.2.0
    • #328 Bump lint-staged from 10.5.4 to 11.0.1
    • #330 Bump eslint from 7.25.0 to 7.31.0
    • #331 Bump ws from 7.3.1 to 7.5.3
    • #332 Bump urlgrey from 0.4.4 to 1.0.0
    • #334 Bump husky from 6.0.0 to 7.0.1
    • #333 Bump teeny-request from 7.0.1 to 7.1.1

    3.8.2

    Fixes

    • #304 Add coverage-final.json as a possible coverage file during file lookup

    3.8.1

    Fixes

    • #246 Revert "Bump teeny-request from 6.0.1 to 7.0.0"

    3.8.0

    Features

    • #160 Add Github Actions support

    Fixes

    • #173 Fix broken gcov command
    • #195 Update Node testing versions
    • #200 Remove flaky tests
    • #204 Create CHANGELOG and remove flaky v4 test
    • #208 Add license scan report and status
    • #220 Remove errant bitly

    Dependencies

    • #189 Bump lint-staged from 10.0.7 to 10.2.11
    • #190 [Security] Bump handlebars from 4.5.3 to 4.7.6
    • #191 Bump prettier from 1.19.1 to 2.0.5

    ... (truncated)

    Commits
    • e22061b Merge pull request #335 from codecov/3.8.3
    • 981df8b 3.8.3
    • 135555c Merge pull request #333 from codecov/dependabot/npm_and_yarn/teeny-request-7.1.1
    • 65b53a3 Merge pull request #334 from codecov/dependabot/npm_and_yarn/husky-7.0.1
    • 6e4af4d Bump teeny-request from 7.0.1 to 7.1.1
    • 1149168 Merge pull request #332 from codecov/dependabot/npm_and_yarn/urlgrey-1.0.0
    • 883785c Merge pull request #331 from codecov/dependabot/npm_and_yarn/ws-7.5.3
    • 04d5ff7 Merge pull request #330 from codecov/dependabot/npm_and_yarn/eslint-7.31.0
    • e6c5bf4 Bump husky from 6.0.0 to 7.0.1
    • f781bc4 Bump ws from 7.3.1 to 7.5.3
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • New patch required to mitigate high risk vulnerability

    New patch required to mitigate high risk vulnerability

    @istarkov, the fbjs dependency was removed time ago and the PR is already merged into master. However, the latest 0.30.0 version of recompose is still injecting that package inside as it doesn't contain the latest changes to the package.json. The fbjs is currently pulling inside a vulnerable version of node-fetch making any package consuming recompose as High risk. Can you please trigger a new release to finally get rid of that extra dependency? Thank you

    opened by andreasonny83 0
  • Bump is-my-json-valid from 2.16.0 to 2.20.6 in /types/flow-example

    Bump is-my-json-valid from 2.16.0 to 2.20.6 in /types/flow-example

    Bumps is-my-json-valid from 2.16.0 to 2.20.6.

    Commits
    Maintainer changes

    This version was pushed to npm by linusu, a new releaser for is-my-json-valid since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump urijs from 1.18.10 to 1.19.11 in /types/flow-example

    Bump urijs from 1.18.10 to 1.19.11 in /types/flow-example

    Bumps urijs from 1.18.10 to 1.19.11.

    Release notes

    Sourced from urijs's releases.

    1.19.11 (April 3rd 2022)

    1.19.10 (March 5th 2022)

    1.19.9 (March 3rd 2022)

    1.19.8 (February 15th 2022)

    1.19.7 (July 14th 2021)

    • SECURITY fixing URI.parseQuery() to prevent overwriting __proto__ in parseQuery() - disclosed privately by @​NewEraCracker
    • SECURITY fixing URI.parse() to handle variable amounts of \ and / in scheme delimiter as Node and Browsers do - disclosed privately by ready-research via https://huntr.dev/
    • removed obsolete build tools
    • updated jQuery versions (verifying compatibility with 1.12.4, 2.2.4, 3.6.0)

    1.19.6 (February 13th 2021)

    • SECURITY fixing URI.parse() to rewrite \ in scheme delimiter to / as Node and Browsers do - disclosed privately by Yaniv Nizry from the CxSCA AppSec team at Checkmarx

    1.19.5 (December 30th 2020)

    1.19.4 (December 23rd 2020)

    1.19.3 (December 20th 2020)

    1.19.2 (October 20th 2019)

    1.19.1 (February 10th 2018)

    1.19.0 (October 1st 2017)

    1.18.12 (August 9th 2017)

    1.18.11 (August 8th 2017)

    Changelog

    Sourced from urijs's changelog.

    1.19.11 (April 3rd 2022)

    1.19.10 (March 5th 2022)

    1.19.9 (March 3rd 2022)

    1.19.8 (February 15th 2022)

    1.19.7 (July 14th 2021)

    • SECURITY fixing URI.parseQuery() to prevent overwriting __proto__ in parseQuery() - disclosed privately by @​NewEraCracker
    • SECURITY fixing URI.parse() to handle variable amounts of \ and / in scheme delimiter as Node and Browsers do - disclosed privately by ready-research via https://huntr.dev/
    • removed obsolete build tools
    • updated jQuery versions (verifying compatibility with 1.12.4, 2.2.4, 3.6.0)

    1.19.6 (February 13th 2021)

    • SECURITY fixing URI.parse() to rewrite \ in scheme delimiter to / as Node and Browsers do - disclosed privately by Yaniv Nizry from the CxSCA AppSec team at Checkmarx

    1.19.5 (December 30th 2020)

    1.19.4 (December 23rd 2020)

    1.19.3 (December 20th 2020)

    1.19.2 (October 20th 2019)

    1.19.1 (February 10th 2018)

    ... (truncated)

    Commits
    • b655c1b chore(build): bumping to version 1.19.11
    • b0c9796 fix(parse): handle CR,LF,TAB
    • 88805fd fix(parse): handle excessive slashes in scheme-relative URLs
    • 926b2aa chore(build): bumping to version 1.19.10
    • a8166fe fix(parse): handle excessive colons in scheme delimiter
    • 01920b5 chore(build): bumping to version 1.19.9
    • 86d1052 fix(parse): remove leading whitespace
    • efae1e5 chore(build): bumping to version 1.19.8
    • 6ea641c fix(parse): case insensitive scheme - #412
    • 19e54c7 chore(build): bumping to version 1.19.7
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v0.30.0)
  • v0.30.0(Aug 30, 2018)

    Remove useless in React 16 optimisation https://github.com/acdlite/recompose/pull/736#issue-212019167 Make state change more similar to React setState.

    Source code(tar.gz)
    Source code(zip)
  • v0.29.0(Aug 28, 2018)

  • v0.28.2(Aug 23, 2018)

  • v0.28.1(Aug 23, 2018)

  • v0.28.0(Aug 23, 2018)

    This release adds support to:

    1. toRenderProps with support for flow type 2.fromRenderProps with support for flow type and multiple arguments.
    2. withPropsOnChange maps subset of owner props to child props with custom predicate.
    3. Upgrade the size snapshot plugin b2f082f
    4. Upgrade babel to ^7.0.0-beta.55 and reduce the bundle size. 0db1ef6

    Big Thanks to @shireeshaBongarala !!!

    Source code(tar.gz)
    Source code(zip)
  • 0.27.1(May 20, 2018)

    This release adds a missing piece between Higher Order Components and Render props

    • Meet withRenderProps props utility, it allows you to transform any HOC into RenderProps component see PR #663 see docs see source see example

    • compose now shorter #643

    The hero of this release is @pomber !!!

    Source code(tar.gz)
    Source code(zip)
  • 0.27.0(Apr 19, 2018)

    • Flow types are now distributed with recompose, please delete flow-typed recompose lib defs. #649
    • Build improvements by @TrySound #645
    • New lifecycle methods are used internally see #647
    • Minor docs and other changes
    Source code(tar.gz)
    Source code(zip)
  • v0.26.0(Oct 6, 2017)

    After a lot of issues like #489 #525 #488 etc we decided to remove eager(in some cases recompose replaced createElement with function call) optimisations from recompose. See discussions in issues for details.

    Thank you @deepsweet for this !!!

    Please read comments here #538 for more information.

    Source code(tar.gz)
    Source code(zip)
  • v0.25.1(Sep 26, 2017)

  • v0.25.0(Aug 16, 2017)

    This release contains:

    1. #479 withStateHandlers fix which allows to use it with SyntheticEvents
    2. #473 Use eager factory optimization only in production env. (Possibly breaking change for development env, does not affects production builds)
    3. #463 Simpler classful component check - this change possibly will allow to use recompose with Preact and Inferno.
    4. #479 flow v0.53 typings support, having this flow release it would be easier to combine recompose and 3rd party hocs. (This PR must be merged to use with flow-typed, until that please use typedefs from current repo defs)

    Thank you @developit, @deepsweet and others for your help!

    Source code(tar.gz)
    Source code(zip)
  • v0.24.0(Jul 12, 2017)

  • v0.23.5(Jun 7, 2017)

    1. Fixed lifecycle enhancer to support targets like IE 11, also fixed broken autobinding behaviour for lifecycle methods, fixed lifecycle docs.

    Thank you @Andarist and @Klaasvaak

    Source code(tar.gz)
    Source code(zip)
  • v0.23.4(May 12, 2017)

  • v0.23.3(May 11, 2017)

    • To get a real advantages of tree shaking #370
    • Two new methods componentFromStreamWithConfig and mapPropsStreamWithConfig #373

    Thank you @TrySound and @mrapogee and all contributors of current release

    Source code(tar.gz)
    Source code(zip)
  • v0.23.1(Apr 10, 2017)

    #347 Recompose now supports ES2015 modules, more information https://github.com/rollup/rollup/wiki/pkg.module

    So all that nice features like "Tree-shaking" are now supported.

    Thank you @TrySound again!

    Source code(tar.gz)
    Source code(zip)
  • v0.23.0(Apr 8, 2017)

    1. Build umd with rollup #341, incredible size reduce (3.9Kb minified, gzipped)
    2. lifecycle now uses es class instead of React.createClass #346 (Possibly breaking change)

    The hero of this release is @TrySound, Thank you Bogdan!

    Source code(tar.gz)
    Source code(zip)
  • v0.22.0(Jan 28, 2017)

    1. Possibly breaking change #303, now props$ stream in observable enhancers will be completed on component unmounting, more details at #220 (possible issue #309)

    2. toClass with string argument fix #306

    Source code(tar.gz)
    Source code(zip)
  • v0.21.2(Dec 24, 2016)

  • v0.21.1(Dec 20, 2016)

    renderNothing if used with branch was incompatible with React 0.14 (#289) symbol-observable updated to ^1.0 (#290) compose method simplification (#293) docs for usage with babel-plugin-lodash (#291)

    Source code(tar.gz)
    Source code(zip)
  • v0.21.0(Dec 12, 2016)

    Mostly small fixes.

    The most visible changes, are

    • withReducer can now optionally initialize state from default reducer argument #250
    • default third argument of branch now equals to identity function #227, brunch now functional and does not use class #273
    • isReferentiallyTransparentFunctionComponent returns true in production even propTypes is present on component #275

    Thank you all for working on this, and for your patience.

    Source code(tar.gz)
    Source code(zip)
  • v0.20.0(Jun 16, 2016)

    The main feature in this release is the addition of a suite of observable utilities, including mapPropsStream and componentFromStream. These are ported over from rx-recompose, which is now deprecated. Unlike rx-recompose, these utilities are compatible with any observable or stream-like library.

    https://github.com/acdlite/recompose/pull/196

    Other changes

    Source code(tar.gz)
    Source code(zip)
  • v0.19.0(May 16, 2016)

    lifecycle() has returned. It now has essentially the same API as React.createClass(), except you don't specify a render method, and it returns a higher-order component rather than a component. See API docs here: https://github.com/acdlite/recompose/blob/master/docs/API.md#lifecycle

    Loose mode has also been enabled when compiling the library for npm. This fixes some issues with older versions of IE.

    Source code(tar.gz)
    Source code(zip)
  • rx-recompose-v0.6.1(May 15, 2016)

    Fixes a bug in createComponent (and therefore mapPropsStream, too) where only the most recent observer receives prop updates. Thanks @gregmuellegger for diagnosing the issue. https://github.com/acdlite/recompose/issues/158

    Source code(tar.gz)
    Source code(zip)
  • v0.18.0(May 10, 2016)

    mapPropsOnChange -> withPropsOnChange

    This helper was renamed to better describe how it works.

    Prune API

    Some helpers were removed. These may be added back, in some form, in a future version. Until then, you can use the lifecycle methods of a React class.

    • doOnReceiveProps
    • lifecycle

    UMD bundle

    A UMD bundle is now built via Webpack on each npm release. It can be accessed via npmcdn: https://npmcdn.com/[email protected]/build/Recompose.min.js

    There's also a base JSFiddle that's handy for playing with the different helpers: https://jsfiddle.net/acdlite/69z2wepo/41596/

    Source code(tar.gz)
    Source code(zip)
  • rx-recompose-v0.6.0(Apr 27, 2016)

    • New module: createComponent maps a stream of owner props to a stream of React nodes.
    • observeProps is now called mapPropsStream
    • observeProps used to allow you to return an object of streams, which it would convert into a stream of objects. This form caused too much confusion, in my experience, so it's been removed in favor of explicit calls to combineLatest.
    • createEventHandler now returns an object with stream and handler, where the handler pushes new values onto the stream. Previously, it returns a function that was both a handler and a stream. This new form is akin to mailboxes in Elm.

    Refer to the README for full info.

    Source code(tar.gz)
    Source code(zip)
  • v0.17.0(Apr 11, 2016)

    Remove currying

    Currying wasn't really buying us much, and it was adding an extra layer of confusion for people new to the library. Helpers are now functions that return higher-order components

    const EnhancedComponent = helper(a, b, c)(BaseComponent)
    

    which means they retain their composability.

    The following form will no longer work:

    // No longer works!
    const EnhancedComponent = helper(a, b, c, BaseComponent)
    

    To aid in the transition, helpers will print a warning to the console if you call them with too many arguments.

    withHandlers

    withHandlers(
      handlerCreators: {
        [handlerName: string]: (props: Object) => Function
      }
    ): HigherOrderComponent
    

    Takes an object map of handler creators. These are higher-order functions that accept a set of props and return a function handler:

    This allows the handler to access the current props via closure, without needing to change its signature.

    Handlers are passed to the base component as immutable props, whose identities are preserved across renders. This avoids a common pitfall where functional components create handlers inside the body of the function, which results in a new handler on every render and breaks downstream shouldComponentUpdate() optimizations that rely on prop equality.

    Usage example:

    const enhanceForm = compose(
      withState('value', 'updateValue', ''),
      withHandlers({
        onChange: props => event => {
          props.updateValue(event.target.value)
        },
        onSubmit: props => event => {
          event.preventDefault()
          submitForm(props.value)
        }
      })
    )
    
    const Form = enhanceForm(
      ({ value, onChange, onSubmit }) =>
        <form onSubmit={onSubmit}>
          <label>Value
            <input type="text" value={value} onChange={onChange} />
          </label>
        </form>
    )
    

    This replaces withAttachedProps, which has been removed.

    Source code(tar.gz)
    Source code(zip)
  • v0.16.0(Apr 8, 2016)

  • 0.15.0(Feb 4, 2016)

  • v0.13.0(Dec 18, 2015)

    withAttachedProps()

    (actually added in 0.12, forgot to update release notes)

    withAttachedProps(
      createChildProps: (getProps: () => Object) => Object,
      BaseComponent: ReactElementType
    ): ReactElementType
    

    Note: The name of this helper will likely change to avoid confusion.

    The first parameter createChildProps() is a function which accepts a function getProps(), which returns the current owner props. The props returned by createChildProps() are immutable and do not change throughout the lifecycle of the component.

    Bugfix

    Fixed bug with renderComponent() https://github.com/acdlite/recompose/pull/84

    Source code(tar.gz)
    Source code(zip)
  • v0.11.0(Nov 18, 2015)

    nest()

    nest(...Components: Array<ReactElementType>): ReactElementType
    

    Composes components by nesting each one inside the previous. For example:

    // Given components A, B, and C
    const ABC = nest(A, B, C)
    <ABC pass="through">Child</ABC>
    
    // Effectively the same as
    <A pass="through">
      <B pass="through">
        <C pass="through">
          Child
        </C>
      </B>
    </A>
    
    Source code(tar.gz)
    Source code(zip)
Owner
Andrew Clark
React core at Facebook. Hi!
Andrew Clark
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Jamie Kyle 16.5k Jan 3, 2023
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
A food order app using React.js

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

G Bharath Sandilya 1 Jan 8, 2022
Concircle scanner mobile app is application That helps you scan your order and position and to know if there are exact or not. it's cross-platform app.

Concircle scanner mobile app ⭐ Star on GitHub — it motivates Me a lot! Concircle scanner mobile app is application That helps you scan your order and

Aymen Ouerghui 10 May 7, 2022
A full-stack application for junior developers to find jobs that match their skill-level, find gigs in order to boost their resume, and showcase a portfolio.

Junior is a full-stack web application that was created to facilitate junior developers in finding jobs that match their skill-level, boosting their resume through finding and completing gigs, and providing a way to easily showcase a portfolio

Karolina 5 Oct 25, 2022
Fully typed hooks and utility functions for the React Native StyleSheet API

react-native-style-utilities Fully typed hooks and utility functions for the React Native StyleSheet API npm i react-native-style-utilities ESLint Set

Marc Rousavy 73 Dec 17, 2022
React Native popup tip utility

react-native-tip React Native Tip is a simple package inspired in MaterialUI-Tooltip that helps you to show a quick tip to the user and highlight some

Maicon Gilton de Souza Freire 42 Jan 5, 2023
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.4k Jan 4, 2023
use this to replace redux,you can use useActions to change context value and useActions return a mutable function collection

English | 中文 NOTE react-context-mutation is a lighter and more convenient state manager designed for react applications. It aims to replace the Redux

null 19 Feb 22, 2022
Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement.

useAsyncQuery Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement. Usage

Alasdair McLeay 7 Nov 16, 2022
Single function to create, manage, compose variants, for any CSS-in-JS libraries.

Build-variants Single function to create, manage, compose variants, for any CSS-in-JS libraries. Motivation Before diving into the implementation deta

Alexis Mineaud 3 Jan 2, 2023
a babel plugin that can transform generator function to state machine, which is a ported version of typescript generator transform

Babel Plugin Lite Regenerator intro This babel plugin is a ported version of TypeScript generator transform. It can transform async and generator func

Shi Meng 6 Jul 8, 2022
Convert a CSS linear gradient function to expo-linear-gradient props

@bacons/css-to-expo-linear-gradient Demo: snack Convert a CSS linear gradient function to expo-linear-gradient props. Add the package to your npm depe

Evan Bacon 15 Dec 15, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
This web application aim to produce an contest notifier utility and a modern open-source compiler.

This web application aim to produce an contest notifier utility and a modern open-source compiler. The current features of the application include : Code Runner , Upcoming and Ongoing Contests.

ABHAY GUPTA 6 Dec 3, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023
A simple javascript utility for conditionally joining classNames together

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

Jed Watson 16.3k Dec 31, 2022