diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..94955f8 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,11 @@ +# Change Log + +All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. + + +## [3.2.1](https://github.com/neoziro/recompact/compare/v3.2.0...v3.2.1) (2017-12-12) + + +### Bug Fixes + +* **connectObs:** unsubscribe from observables when unmounting ([#92](https://github.com/neoziro/recompact/issues/92)) ([2caf2a1](https://github.com/neoziro/recompact/commit/2caf2a1)) diff --git a/docs/3.2.1.html b/docs/3.2.1.html new file mode 100644 index 0000000..f98cef2 --- /dev/null +++ b/docs/3.2.1.html @@ -0,0 +1,867 @@ + + + + + Recompact documentation + + + + + +
+
+
+ +
+
+ Menu +
+
+
+
+ +
+
+

Config

+ +
+
+

Higher-order-components

+ +
+
+

Utilities

+ +
+
+
+
+

“Config” Methods

+
+

setConfig(options)

+

+

Set the config of Recompact.

+

Arguments

+
    +
  1. options (Object):
  2. +
+

Example

+
setConfig({observablesKey: 'observables'});
+ +
+
+
+

“Higher-order-components” Methods

+
+

branch(test, left, [right=identity])

+

+

Accepts a test function and two higher-order components. The test function +is passed the props from the owner. If it returns true, the left higher-order +component is applied to BaseComponent; otherwise, the right higher-order +component is applied (defaults to identity).

+

Arguments

+
    +
  1. test (Function): The test to apply.
  2. +
  3. left (HigherOrderComponent): The higher-order component applied if the result of the test is true.
  4. +
  5. [right=identity] (HigherOrderComponent): The higher-order component applied if the result of the test is false.
  6. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
// Add the logic or rendering nothing if the prop `count` equals to `0`.
branch(({count}) => count === 0, renderNothing)(MyComponent);
+ +
+
+

connectObs(obsMapper)

+

+

Connect observables to props using a map.

+
    +
  • The function take one argument, an object containing context observables +and a special observable props$ that emits owner props.
  • +
  • The property is updated at each emission of a new value by the associated +Observable.
  • +
  • Properties matching /^on[A-Z]/ are mapped to the next method of +the associated Observer.
  • +
+

Arguments

+
    +
  1. obsMapper (Function): The function that takes observables and returns map.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
connectObs(({change$, value$}) => ({
  onChange: change$,
  value: value$,
}))('input');
+ +
+
+

debug(label, selector)

+

+

Display the flow of props. +Very useful for debugging higher-order component stack.

+

Arguments

+
    +
  1. label (*): A label displayed in console.
  2. +
  3. selector (Function): A props selector.
  4. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
recompact.compose(
  recompact.withProps({ foo: 'bar' }),
  recompact.debug(),
  recompact.renameProp('foo', 'className'),
  recompact.debug(),
)('input')
+ +
+
+

defaultProps(defaultProps)

+

+

Specify props values that will be used if the prop is undefined.

+

Arguments

+
    +
  1. defaultProps (Object): Default props.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const Button = defaultProps({type: 'button'})('button');
<Button /> // will render <button type="button" />
+ +
+
+

flattenProp(propName)

+

+

Flattens a prop so that its fields are spread out into the props object.

+

Arguments

+
    +
  1. propName (String): Name of the prop to flatten.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const Button = flattenProp('props')('button');
<Button props={{type: 'submit'}} /> // will render <button type="submit" />
+ +
+
+

flattenProps(paths)

+

+

Flattens one or several props so that its fields are spread out into the props object.

+

Aliases

+

flattenProp

+

Arguments

+
    +
  1. paths (String|String[]): The property paths to flatten.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const Button = flattenProps(['a', 'b'])('button');
// Will render <button type="submit" className="btn" />
<Button a={{type: 'submit'}} b={{className: 'btn'}} />
+ +
+
+

getContext(contextTypes)

+

+

Gets values from context and passes them along as props.

+

Arguments

+
    +
  1. contextTypes (Object): Context types to inject as props.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
// Create a component that will bring back to home when clicked
const HomeButton = compose(
  withContext({router: PropTypes.object.isRequired}),
  withHandlers({onClick: ({router}) => () => router.push('/')}),
)('button');
+ +
+
+

lifecycle(spec)

+

+

A higher-order component that permits to hook a lifecycle method. Available methods are:

+
    +
  • componentWillMount
  • +
  • componentDidMount
  • +
  • componentWillReceiveProps
  • +
  • shouldComponentUpdate
  • +
  • componentWillUpdate
  • +
  • componentDidUpdate
  • +
  • componentWillUnmount +You should use this helper as an escape hatch, in +case you need to access component lifecycle methods.
  • +
+

Arguments

+
    +
  1. spec (Object): Lifecycle spec
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
// Create a hoc that will log when a component will mount
const logWhenMount = lifecycle({componentWillMount: () => console.log('will mount')});
+ +
+
+

mapProps(propsMapper)

+

+

Accepts a function that maps owner props to a new collection of props that +are passed to the base component.

+

Arguments

+
    +
  1. propsMapper (Function): The function that returns new props.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
// Add a new prop computed from owner props
mapProps(({count}) => ({moreThanFive: count > 5}))(MyComponent);
+ +
+
+

mapPropsStream(propsStreamMapper)

+

+

Accepts a function that maps an observable stream of owner props to a stream +of child props, rather than directly to a stream of React nodes. +The child props are then passed to a base component.

+

Arguments

+
    +
  1. propsStreamMapper (Function):
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
// Delay rendering of 1s
const delayRendering = mapPropsStream(props$ => props$.delay(1000));
+ +
+
+

nest(components)

+

+

Composes components by nesting each one inside the previous.

+

Arguments

+
    +
  1. components (...(ReactClass|ReactFunctionalComponent)):
  2. +
+

Returns

+

(ReactFunctionalComponent):

+

Example

+
// Delay rendering of 1s
const DivButton = nest('div', 'button');
// will render <div className="foo"><button className="foo" /></div>
<DivButton className="foo" />
+ +
+
+

omitProps(paths)

+

+

Same as lodash omit but for props.

+

Arguments

+
    +
  1. paths (String|String[]): The property paths to omit.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const withoutValue = omitProps('value');
+ +
+
+

onlyUpdateForKeys(propKeys)

+

+

Prevents the component from updating unless a prop corresponding to one of the +given keys has updated. Uses shallowEqual() to test for changes. +This is a much better optimization than the popular approach of using PureRenderMixin, +shouldPureComponentUpdate(), or pure() helper, because those +tools compare every prop, whereas onlyUpdateForKeys() only cares about the +props that you specify.

+

Arguments

+
    +
  1. propKeys (String[]): The property keys that will induce a re-render.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
onlyUpdateForKeys(['value'])
+ +
+
+

onlyUpdateForPropTypes()

+

+

Works like onlyUpdateForKeys(), but prop keys are inferred from the propTypes +of the base component. Useful in conjunction with setPropTypes(). +If the base component does not have any propTypes, the component will never +receive any updates. This probably isn't the expected behavior, so a warning +is printed to the console.

+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const Button = ({className}) => <button className={className} />;
Button.propTypes = {className: PropTypes.string};
const EnhancedButton = onlyUpdateForPropTypes(Button);
+ +
+
+

pickProps(paths)

+

+

Same as lodash pick but for props.

+

Arguments

+
    +
  1. paths (String|String[]): The property paths to pick.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const onlyWithValue = pickProps('value');
+ +
+
+

pluckObs(observablesNames)

+

+

Takes a list of observable names, find the corresponding observables +from the context and map them to the corresponding prop according the +convention i.e.: same name without a $ at the end.

+

Arguments

+
    +
  1. observablesNames (Function):
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+ +
+
+

pure()

+

+

Prevents the component from updating unless a prop has changed. +Uses shallowEqual() to test for changes.

+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
pure('button')
+ +
+
+

renameProp(oldName, newName)

+

+

Renames a single prop.

+

Arguments

+
    +
  1. oldName (String):
  2. +
  3. newName (String):
  4. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
renameProp('data', 'value')
+ +
+
+

renameProps(nameMap)

+

+

Renames multiple props, using a map of old prop names to new prop names.

+

Arguments

+
    +
  1. nameMap (Object): A map with old prop as key and new prop as value.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
renameProps({data: 'value'})
+ +
+
+

renderComponent(Component)

+

+

Takes a component and returns a higher-order component version of that component. +This is useful in combination with another helper that expects a higher-order +component, like branch.

+

Arguments

+
    +
  1. Component (ReactClass|ReactFunctionalComponent|String):
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const renderLoaderIfLoading = branch(
  ({loading} => loading),
  renderComponent(Loader),
)
+ +
+
+

renderNothing()

+

+

A higher-order component that always renders null.

+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const renderNothingIfNoRules = branch(
  ({rules} => rules.length === 0),
  renderNothing,
)
+ +
+
+

setDisplayName(displayName)

+

+

Assigns to the displayName property on the base component.

+

Arguments

+
    +
  1. displayName (String):
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
setDisplayName('AnotherDisplayName')(MyComponent);
+ +
+
+

setPropTypes(propTypes)

+

+

Assigns to the propTypes property on the base component.

+

Arguments

+
    +
  1. propTypes (Object):
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
setPropTypes({children: PropTypes.node})(MyComponent);
+ +
+
+

setStatic(key, value)

+

+

Assigns a value to a static property on the base component.

+

Arguments

+
    +
  1. key (String):
  2. +
  3. value (String):
  4. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
setStatic({defaultProps: {type: 'button'}})('button');
+ +
+
+

shouldUpdate(test)

+

+

Higher-order component version of +shouldComponentUpdate(). +The test function accepts both the current props and the next props.

+

Arguments

+
    +
  1. test (Function): Receive two arguments, props and nextProps
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
// Pure
shouldUpdate((props, nextProps) => shallowEqual(props, nextProps))
+ +
+
+

toClass()

+

+

Takes a function component and wraps it in a class. This can be used as a +fallback for libraries that need to add a ref to a component, like Relay. +If the base component is already a class, it returns the given component.

+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const Component = toClass(() => <div />);
<Component ref="foo" /> // A ref can be used because Component is a class
+ +
+
+

withContext(childContextTypes, getChildContext)

+

+

Provides context to the component's children. childContextTypes is an object +of React prop types. getChildContext() is a function that returns +the child context. Use along with getContext().

+

Arguments

+
    +
  1. childContextTypes (Object):
  2. +
  3. getChildContext (Function):
  4. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
// Provide window in the context, useful for testing
const withWindow = withContext({window: PropTypes.object.isRequired}, () => {window})
+ +
+
+

withHandlers(handlerFactories)

+

+

Takes an object map of handler creators or a factory function. 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.

+

Arguments

+
    +
  1. handlerFactories (Function|Object):
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

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

withObs(obsMapper)

+

+

Takes observables from the context and special observable props$ an map them +to a new set of observables.

+

Arguments

+
    +
  1. obsMapper (Function): The function that take previous observables and returns new ones.
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const withFullName$ = mapObs(({firstName$, props$}) => ({
 fullName$: Observable.combineLatest(
   firstName$,
   props$.pluck('lastName'),
   (firstName, lastName) => `${firstName} ${lastName}`
  )
}))
+ +
+
+

withProps(propsMapper)

+

+

Like mapProps(), except the newly created props are merged with the owner props. +Instead of a function, you can also pass a props object directly. In this form, +it is similar to defaultProps(), except the provided props take precedence over +props from the owner.

+

Arguments

+
    +
  1. propsMapper (Function|Object):
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const Button = withProps({type: 'button'})('button');
const XButton = withProps(({type}) => {type: `x${type}`})('button');
+ +
+
+

withPropsOnChange(shouldMapOrKeys, createProps)

+

+

Like withProps(), except the new props are only created when one of the owner +props specified by shouldMapOrKeys changes. This helps ensure that expensive +computations inside createProps() are only executed when necessary. +Instead of an array of prop keys, the first parameter can also be a function +that returns a boolean, given the current props and the next props. This allows +you to customize when createProps() should be called.

+

Arguments

+
    +
  1. shouldMapOrKeys (Function|String|String[]):
  2. +
  3. createProps (Function):
  4. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
const withEmptyProp = withPropsOnChange('count', ({count}) => ({empty: count === 0}));
+ +
+
+

withReducer(stateName, dispatchName, reducer, initialState)

+

+

Similar to withState(), but state updates are applied using a reducer function. +A reducer is a function that receives a state and an action, and returns a new state. +Passes two additional props to the base component: a state value, and a +dispatch method. The dispatch method sends an action to the reducer, and +the new state is applied.

+

Arguments

+
    +
  1. stateName (String):
  2. +
  3. dispatchName (String):
  4. +
  5. reducer (Function):
  6. +
  7. initialState (*):
  8. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
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>
)
+ +
+
+

withState(stateName, stateUpdaterName, initialState)

+

+

Passes two additional props to the base component: a state value, and a function +to update that state value. The state updater has the following signature:

+
stateUpdater<T>((prevValue: T) => T): void
stateUpdater(newValue: any): void
+

The first form accepts a function which maps the previous state value to a new +state value. You'll likely want to use this state updater along with withHandlers() +or withProps() to create specific updater functions. For example, to create an +HoC that adds basic counting functionality to a component:

+
const addCounting = composewithState('counter', 'setCounter', `0`), withProps(({ setCounter }) => *({ increment: () => setCounter(n => n + `1`), decrement: () => setCounter(n => n - `1`), reset: () => setCounter(0) }))*
)
+

The second form accepts a single value, which is used as the new state. +An initial state value is required. It can be either the state value itself, +or a function that returns an initial state given the initial props.

+

Arguments

+
    +
  1. stateName (String):
  2. +
  3. stateUpdaterName (String):
  4. +
  5. initialState (*|Function):
  6. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+ +
+
+

wrapDisplayName(component, wrapperName)

+

+

Returns a wrapped version of a React component's display name. For instance, +if the display name of component is 'Post', and wrapperName is 'mapProps', +the return value is 'mapProps(Post)'. Most Recompose higher-order components +use wrapDisplayName().

+

Arguments

+
    +
  1. component (ReactClass|ReactFunctionalComponent): Component
  2. +
  3. wrapperName (String): Wrapper name
  4. +
+

Returns

+

(String): Returns a wrapped displayName of the component.

+

Example

+
// Create a hoc that will log when a component will mount
wrapDisplayName(Button, 'wrap'); // will return wrap(Button)
+ +
+
+
+

“Utilities” Methods

+
+

componentFromProp(prop)

+

+

Creates a component that accepts a component as a prop and renders it +with the remaining props.

+

Arguments

+
    +
  1. prop (String): The prop to render as Component.
  2. +
+

Returns

+

(ReactFunctionalComponent): Returns a Component.

+

Example

+
const enhance = defaultProps({component: 'button'});
const Button = enhance(componentFromProp('component'));
 
<Button foo="bar" /> // renders <button foo="bar" />
<Button component="a" foo="bar" />  // renders <a foo="bar" />
<Button component={Link} foo="bar" />  // renders <Link foo="bar" />
+ +
+
+

compose([funcs])

+

+

This method is similar to lodash flowRight. It permits to easily compose +several high order components.

+

Arguments

+
    +
  1. [funcs] (...Function): The functions to invoke.
  2. +
+

Returns

+

(Function): Returns the new composite function.

+

Example

+
const enhance = compose(pure, withProps({foo: 'bar'}));
const Component = enhance(MyComponent);
+ +
+
+

createEagerElement(type, [props], [children])

+

+

React elements are lazily evaluated. But when a higher-order component +renders a functional component, the laziness doesn't have any real benefit. +createEagerElement() is a replacement for React.createElement() that checks +if the given component is referentially transparent. If so, rather than +returning a React element, it calls the functional component with the given +props and returns its output.

+

Arguments

+
    +
  1. type (ReactClass|ReactFunctionalComponent|String): The type of component to render.
  2. +
  3. [props] (Object): The props of the component.
  4. +
  5. [children] (ReactNode): The children of the component.
  6. +
+

Returns

+

(ReactElement): Returns a element.

+

Example

+
createEagerElement('div', {className: 'foo'});
+ +
+
+

createEagerFactory(type)

+

+

The factory form of createEagerElement(). +Given a component, it returns a factory.

+

Arguments

+
    +
  1. type (ReactClass|ReactFunctionalComponent|String): The type of component to render.
  2. +
+

Returns

+

(Function): Returns a function that take two arguments (props, children) and create +an element of the given type.

+

Example

+
const div = createFactory('div');
div({className: 'foo'});
+ +
+
+

createEventHandler()

+

+

Returns an object with properties handler and stream. stream is an observable +sequence, and handler is a function that pushes new values onto the sequence. +Useful for creating event handlers like onClick.

+

Returns

+

(Object): eventHandler

+

Example

+
const {handler, stream} = createEventHandler();
+ +
+
+

createHelper(hoc, helperName, [noArgs=false])

+

+

Utility method that gives to higher-order components a comprehensive display name.

+

Arguments

+
    +
  1. hoc (HigherOrderComponent): Higher-order component to wrap.
  2. +
  3. helperName (String): Name used to create displayName.
  4. +
  5. [noArgs=false] (Boolean): Indicate if the higher-order component has some arguments.
  6. +
+

Returns

+

(HigherOrderComponent): Returns a wrapped hoc.

+

Example

+
const pluckOnChangeTargetValue = createHelper(
  withHandlers({
    onChange: ({onChange}) => ({target: {value}}) => onChange(value),
  }),
  'pluckOnChangeTargetValue',
);
 
const Input = pluckOnChangeTargetValue('input');
<Input /> // Will have "pluckOnChangeTargetValue(input)" as displayName
+ +
+
+

createSink(callback)

+

+

Creates a component that renders nothing (null) but calls a callback when +receiving new props.

+

Arguments

+
    +
  1. callback (Function): Function called when new props are received.
  2. +
+

Returns

+

(ReactClass): Returns a ReactClass.

+

Example

+
const LocationUpdater = createSink(({hash}) => {
  window.location.hash = hash;
});
<LocationUpdater hash="foo" /> // Will add "#foo" in the url
+ +
+
+

getDisplayName(component)

+

+

Returns the display name of a React component. Falls back to 'Component'.

+

Arguments

+
    +
  1. component (ReactClass|ReactFunctionalComponent):
  2. +
+

Returns

+

(String): Returns the display name of the provided component.

+

Example

+
const MyButton = () => <button />;
MyButton.displayName = 'MyButton';
 
getDisplayName(MyComponent); // Will return "MyButton"
+ +
+
+

hoistStatics(hoc)

+

+

Augments a higher-order component so that when used, it copies non-react +static properties from the base component to the new component. This is +helpful when using Recompose with libraries like Relay. +Note that this only hoists non-react statics. The following static properties +will not be hoisted: childContextTypes, contextTypes, defaultProps, displayName, +getDefaultProps, mixins, propTypes, and type. The following native static methods +will also be ignored: name, length, prototype, caller, arguments, and arity

+

Arguments

+
    +
  1. hoc (HigherOrderComponent):
  2. +
+

Returns

+

(HigherOrderComponent): A function that takes a component and returns a new component.

+

Example

+
hoistStatics(withProps({foo: 'bar'}));
+ +
+
+

identity(value)

+

+

This method is similar to lodash identity. It returns the first argument it receives.

+

Arguments

+
    +
  1. value (*): Any value
  2. +
+

Returns

+

(*): Returns value

+

Example

+
identity(Component) === Component
+ +
+
+

isClassComponent(value)

+

+

Returns true if the given value is a React component class.

+

Arguments

+
    +
  1. value (*): Any value
  2. +
+

Returns

+

(Boolean): Returns true if the given value is a React component class.

+

Example

+
const Nothing = () => null;
const Nothing2 = class extends Component { render() { return null; } };
const Nothing3 = React.createClass({ render() { return null; } });
isClassComponent(Nothing); // false
isClassComponent(Nothing2); // true
isClassComponent(Nothing3); // true
+ +
+
+

isReferentiallyTransparentFunctionComponent(value)

+

+

Returns true if the given value is a referentially transparent function component. +A referentially transparent function component is a component without any other +thing expect taking some props and returning a component. +This method is useful to apply some optimization.

+

Arguments

+
    +
  1. value (*): Any value
  2. +
+

Returns

+

(Boolean): Returns true if the given value is a referentially +transparent function component.

+

Example

+
const Button = () => <button />;
isReferentiallyTransparentFunctionComponent(Button); // true
+ +
+
+
+ +
+ + + diff --git a/docs/README.md b/docs/README.md index 79e46e6..0b461dc 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,4 +1,4 @@ -# recompact v3.2.0 +# recompact v3.2.1 @@ -80,7 +80,7 @@

setConfig(options)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/setConfig.js#L15) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/setConfig.js#L15) Set the config of Recompact. @@ -105,7 +105,7 @@ setConfig({observablesKey: 'observables'});

branch(test, left, [right=identity])

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/branch.js#L24) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/branch.js#L24) Accepts a test function and two higher-order components. The test function is passed the props from the owner. If it returns true, the left higher-order @@ -133,7 +133,7 @@ branch(({count}) => count === 0, renderNothing)(MyComponent);

connectObs(obsMapper)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/connectObs.js#L61) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/connectObs.js#L61) Connect observables to props using a map. * The function take one argument, an object containing context observables @@ -164,7 +164,7 @@ connectObs(({change$, value$}) => ({

debug(label, selector)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/debug.js#L23) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/debug.js#L23) Display the flow of props. Very useful for debugging higher-order component stack. @@ -193,7 +193,7 @@ recompact.compose(

defaultProps(defaultProps)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/defaultProps.js#L19) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/defaultProps.js#L19) Specify props values that will be used if the prop is `undefined`. @@ -216,7 +216,7 @@ const Button = defaultProps({type: 'button'})('button');

flattenProp(propName)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/flattenProp.js#L18) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/flattenProp.js#L18) Flattens a prop so that its fields are spread out into the props object. @@ -239,7 +239,7 @@ const Button = flattenProp('props')('button');

flattenProps(paths)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/flattenProps.js#L18) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/flattenProps.js#L18) Flattens one or several props so that its fields are spread out into the props object. @@ -266,7 +266,7 @@ const Button = flattenProps(['a', 'b'])('button');

getContext(contextTypes)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/getContext.js#L19) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/getContext.js#L19) Gets values from context and passes them along as props. @@ -292,7 +292,7 @@ const HomeButton = compose(

lifecycle(spec)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/lifecycle.js#L36) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/lifecycle.js#L36) A higher-order component that permits to hook a lifecycle method. Available methods are:
* componentWillMount @@ -324,7 +324,7 @@ const logWhenMount = lifecycle({componentWillMount: () => console.log('will moun

mapProps(propsMapper)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/mapProps.js#L19) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/mapProps.js#L19) Accepts a function that maps owner props to a new collection of props that are passed to the base component. @@ -348,7 +348,7 @@ mapProps(({count}) => ({moreThanFive: count > 5}))(MyComponent);

mapPropsStream(propsStreamMapper)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/mapPropsStream.js#L18) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/mapPropsStream.js#L18) Accepts a function that maps an observable stream of owner props to a stream of child props, rather than directly to a stream of React nodes. @@ -373,7 +373,7 @@ const delayRendering = mapPropsStream(props$ => props$.delay(1000));

nest(components)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/nest.js#L17) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/nest.js#L17) Composes components by nesting each one inside the previous. @@ -398,7 +398,7 @@ const DivButton = nest('div', 'button');

omitProps(paths)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/omitProps.js#L17) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/omitProps.js#L17) Same as lodash `omit` but for props. @@ -420,7 +420,7 @@ const withoutValue = omitProps('value');

onlyUpdateForKeys(propKeys)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/onlyUpdateForKeys.js#L24) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/onlyUpdateForKeys.js#L24) Prevents the component from updating unless a prop corresponding to one of the given keys has updated. Uses `shallowEqual()` to test for changes. @@ -447,7 +447,7 @@ onlyUpdateForKeys(['value'])

onlyUpdateForPropTypes()

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/onlyUpdateForPropTypes.js#L22) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/onlyUpdateForPropTypes.js#L22) Works like `onlyUpdateForKeys()`, but prop keys are inferred from the `propTypes` of the base component. Useful in conjunction with `setPropTypes()`. @@ -472,7 +472,7 @@ const EnhancedButton = onlyUpdateForPropTypes(Button);

pickProps(paths)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/pickProps.js#L17) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/pickProps.js#L17) Same as lodash `pick` but for props. @@ -494,7 +494,7 @@ const onlyWithValue = pickProps('value');

pluckObs(observablesNames)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/pluckObs.js#L14) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/pluckObs.js#L14) Takes a list of observable names, find the corresponding observables from the context and map them to the corresponding prop according the @@ -514,7 +514,7 @@ convention i.e.: same name without a $ at the end.

pure()

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/pure.js#L16) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/pure.js#L16) Prevents the component from updating unless a prop has changed. Uses `shallowEqual()` to test for changes. @@ -534,7 +534,7 @@ pure('button')

renameProp(oldName, newName)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/renameProp.js#L17) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/renameProp.js#L17) Renames a single prop. @@ -557,7 +557,7 @@ renameProp('data', 'value')

renameProps(nameMap)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/renameProps.js#L28) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/renameProps.js#L28) Renames multiple props, using a map of old prop names to new prop names. @@ -579,7 +579,7 @@ renameProps({data: 'value'})

renderComponent(Component)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/renderComponent.js#L19) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/renderComponent.js#L19) Takes a component and returns a higher-order component version of that component. This is useful in combination with another helper that expects a higher-order @@ -606,7 +606,7 @@ const renderLoaderIfLoading = branch(

renderNothing()

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/renderNothing.js#L17) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/renderNothing.js#L17) A higher-order component that always renders `null`. @@ -628,7 +628,7 @@ const renderNothingIfNoRules = branch(

setDisplayName(displayName)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/setDisplayName.js#L14) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/setDisplayName.js#L14) Assigns to the `displayName` property on the base component. @@ -650,7 +650,7 @@ setDisplayName('AnotherDisplayName')(MyComponent);

setPropTypes(propTypes)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/setPropTypes.js#L14) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/setPropTypes.js#L14) Assigns to the `propTypes` property on the base component. @@ -672,7 +672,7 @@ setPropTypes({children: PropTypes.node})(MyComponent);

setStatic(key, value)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/setStatic.js#L13) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/setStatic.js#L13) Assigns a value to a static property on the base component. @@ -695,7 +695,7 @@ setStatic({defaultProps: {type: 'button'}})('button');

shouldUpdate(test)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/shouldUpdate.js#L21) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/shouldUpdate.js#L21) Higher-order component version of [`shouldComponentUpdate()`](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate). @@ -720,7 +720,7 @@ shouldUpdate((props, nextProps) => shallowEqual(props, nextProps))

toClass()

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/toClass.js#L20) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/toClass.js#L20) Takes a function component and wraps it in a class. This can be used as a fallback for libraries that need to add a ref to a component, like Relay. @@ -742,7 +742,7 @@ const Component = toClass(() =>
);

withContext(childContextTypes, getChildContext)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/withContext.js#L20) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/withContext.js#L20) Provides context to the component's children. `childContextTypes` is an object of React prop types. `getChildContext()` is a function that returns @@ -768,7 +768,7 @@ const withWindow = withContext({window: PropTypes.object.isRequired}, () => {win

withHandlers(handlerFactories)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/withHandlers.js#L50) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/withHandlers.js#L50) Takes an object map of handler creators or a factory function. These are higher-order functions that accept a set of props and return a function handler: @@ -817,7 +817,7 @@ const Form = enhance(({ value, onChange, onSubmit }) =>

withObs(obsMapper)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/withObs.js#L24) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/withObs.js#L24) Takes observables from the context and special observable `props$` an map them to a new set of observables. @@ -846,7 +846,7 @@ const withFullName$ = mapObs(({firstName$, props$}) => ({

withProps(propsMapper)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/withProps.js#L23) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/withProps.js#L23) Like `mapProps()`, except the newly created props are merged with the owner props. Instead of a function, you can also pass a props object directly. In this form, @@ -872,7 +872,7 @@ const XButton = withProps(({type}) => {type: `x${type}`})('button');

withPropsOnChange(shouldMapOrKeys, createProps)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/withPropsOnChange.js#L27) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/withPropsOnChange.js#L27) Like `withProps()`, except the new props are only created when one of the owner props specified by `shouldMapOrKeys` changes. This helps ensure that expensive @@ -900,7 +900,7 @@ const withEmptyProp = withPropsOnChange('count', ({count}) => ({empty: count ===

withReducer(stateName, dispatchName, reducer, initialState)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/withReducer.js#L46) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/withReducer.js#L46) Similar to `withState()`, but state updates are applied using a reducer function. A reducer is a function that receives a state and an action, and returns a new state. @@ -947,7 +947,7 @@ const Counter = enhance(({ counter, dispatch }) =>

withState(stateName, stateUpdaterName, initialState)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/withState.js#L43) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/withState.js#L43) Passes two additional props to the base component: a state value, and a function to update that state value. The state updater has the following signature: @@ -983,7 +983,7 @@ or a function that returns an initial state given the initial props.

wrapDisplayName(component, wrapperName)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/wrapDisplayName.js#L19) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/wrapDisplayName.js#L19) Returns a wrapped version of a React component's display name. For instance, if the display name of `component` is `'Post'`, and `wrapperName` is `'mapProps'`, @@ -1016,7 +1016,7 @@ wrapDisplayName(Button, 'wrap'); // will return wrap(Button)

componentFromProp(prop)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/componentFromProp.js#L21) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/componentFromProp.js#L21) Creates a component that accepts a component as a prop and renders it with the remaining props. @@ -1044,7 +1044,7 @@ const Button = enhance(componentFromProp('component'));

compose([funcs])

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/compose.js#L17) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/compose.js#L17) This method is similar to lodash `flowRight`. It permits to easily compose several high order components. @@ -1068,7 +1068,7 @@ const Component = enhance(MyComponent);

createEagerElement(type, [props], [children])

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/createEagerElement.js#L22) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/createEagerElement.js#L22) React elements are lazily evaluated. But when a higher-order component renders a functional component, the laziness doesn't have any real benefit. @@ -1097,7 +1097,7 @@ createEagerElement('div', {className: 'foo'});

createEagerFactory(type)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/createEagerFactory.js#L18) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/createEagerFactory.js#L18) The factory form of `createEagerElement()`. Given a component, it returns a [factory](https://facebook.github.io/react/docs/react-api.html#createfactory). @@ -1122,7 +1122,7 @@ div({className: 'foo'});

createEventHandler()

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/createEventHandler.js#L36) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/createEventHandler.js#L36) Returns an object with properties handler and stream. stream is an observable sequence, and handler is a function that pushes new values onto the sequence. @@ -1143,7 +1143,7 @@ const {handler, stream} = createEventHandler();

createHelper(hoc, helperName, [noArgs=false])

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/createHelper.js#L22) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/createHelper.js#L22) Utility method that gives to higher-order components a comprehensive display name. @@ -1175,7 +1175,7 @@ const Input = pluckOnChangeTargetValue('input');

createSink(callback)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/createSink.js#L18) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/createSink.js#L18) Creates a component that renders nothing *(null)* but calls a callback when receiving new props. @@ -1201,7 +1201,7 @@ const LocationUpdater = createSink(({hash}) => {

getDisplayName(component)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/getDisplayName.js#L15) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/getDisplayName.js#L15) Returns the display name of a React component. Falls back to 'Component'. @@ -1226,7 +1226,7 @@ getDisplayName(MyComponent); // Will return "MyButton"

hoistStatics(hoc)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/hoistStatics.js#L21) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/hoistStatics.js#L21) Augments a higher-order component so that when used, it copies non-react static properties from the base component to the new component. This is @@ -1254,7 +1254,7 @@ hoistStatics(withProps({foo: 'bar'}));

identity(value)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/identity.js#L13) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/identity.js#L13) This method is similar to lodash `identity`. It returns the first argument it receives. @@ -1276,7 +1276,7 @@ identity(Component) === Component

isClassComponent(value)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/isClassComponent.js#L18) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/isClassComponent.js#L18) Returns true if the given value is a React component class. @@ -1303,7 +1303,7 @@ isClassComponent(Nothing3); // true

isReferentiallyTransparentFunctionComponent(value)

-[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.0/src/isReferentiallyTransparentFunctionComponent.js#L20) +[Ⓢ](https://github.com/neoziro/recompact/blob/v3.2.1/src/isReferentiallyTransparentFunctionComponent.js#L20) Returns true if the given value is a referentially transparent function component. A referentially transparent function component is a component without any other diff --git a/docs/index.html b/docs/index.html index acebf13..f98cef2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -90,7 +90,7 @@

Utilities

“Config” Methods

setConfig(options)

-

+

Set the config of Recompact.

Arguments

    @@ -105,7 +105,7 @@

    Example

    “Higher-order-components” Methods

    branch(test, left, [right=identity])

    -

    +

    Accepts a test function and two higher-order components. The test function is passed the props from the owner. If it returns true, the left higher-order component is applied to BaseComponent; otherwise, the right higher-order @@ -124,7 +124,7 @@

    Example

    connectObs(obsMapper)

    -

    +

    Connect observables to props using a map.

    • The function take one argument, an object containing context observables @@ -146,7 +146,7 @@

      Example

    debug(label, selector)

    -

    +

    Display the flow of props. Very useful for debugging higher-order component stack.

    Arguments

    @@ -162,7 +162,7 @@

    Example

    defaultProps(defaultProps)

    -

    +

    Specify props values that will be used if the prop is undefined.

    Arguments

      @@ -176,7 +176,7 @@

      Example

    flattenProp(propName)

    -

    +

    Flattens a prop so that its fields are spread out into the props object.

    Arguments

      @@ -190,7 +190,7 @@

      Example

    flattenProps(paths)

    -

    +

    Flattens one or several props so that its fields are spread out into the props object.

    Aliases

    flattenProp

    @@ -206,7 +206,7 @@

    Example

    getContext(contextTypes)

    -

    +

    Gets values from context and passes them along as props.

    Arguments

      @@ -220,7 +220,7 @@

      Example

    lifecycle(spec)

    -

    +

    A higher-order component that permits to hook a lifecycle method. Available methods are:

    • componentWillMount
    • @@ -245,7 +245,7 @@

      Example

    mapProps(propsMapper)

    -

    +

    Accepts a function that maps owner props to a new collection of props that are passed to the base component.

    Arguments

    @@ -260,7 +260,7 @@

    Example

    mapPropsStream(propsStreamMapper)

    -

    +

    Accepts a function that maps an observable stream of owner props to a stream of child props, rather than directly to a stream of React nodes. The child props are then passed to a base component.

    @@ -276,7 +276,7 @@

    Example

    nest(components)

    -

    +

    Composes components by nesting each one inside the previous.

    Arguments

      @@ -290,7 +290,7 @@

      Example

    omitProps(paths)

    -

    +

    Same as lodash omit but for props.

    Arguments

      @@ -304,7 +304,7 @@

      Example

    onlyUpdateForKeys(propKeys)

    -

    +

    Prevents the component from updating unless a prop corresponding to one of the given keys has updated. Uses shallowEqual() to test for changes. This is a much better optimization than the popular approach of using PureRenderMixin, @@ -323,7 +323,7 @@

    Example

    onlyUpdateForPropTypes()

    -

    +

    Works like onlyUpdateForKeys(), but prop keys are inferred from the propTypes of the base component. Useful in conjunction with setPropTypes(). If the base component does not have any propTypes, the component will never @@ -337,7 +337,7 @@

    Example

    pickProps(paths)

    -

    +

    Same as lodash pick but for props.

    Arguments

      @@ -351,7 +351,7 @@

      Example

    pluckObs(observablesNames)

    -

    +

    Takes a list of observable names, find the corresponding observables from the context and map them to the corresponding prop according the convention i.e.: same name without a $ at the end.

    @@ -365,7 +365,7 @@

    Returns

    pure()

    -

    +

    Prevents the component from updating unless a prop has changed. Uses shallowEqual() to test for changes.

    Returns

    @@ -376,7 +376,7 @@

    Example

    renameProp(oldName, newName)

    -

    +

    Renames a single prop.

    Arguments

      @@ -391,7 +391,7 @@

      Example

    renameProps(nameMap)

    -

    +

    Renames multiple props, using a map of old prop names to new prop names.

    Arguments

      @@ -405,7 +405,7 @@

      Example

    renderComponent(Component)

    -

    +

    Takes a component and returns a higher-order component version of that component. This is useful in combination with another helper that expects a higher-order component, like branch.

    @@ -421,7 +421,7 @@

    Example

    renderNothing()

    -

    +

    A higher-order component that always renders null.

    Returns

    (HigherOrderComponent): A function that takes a component and returns a new component.

    @@ -431,7 +431,7 @@

    Example

    setDisplayName(displayName)

    -

    +

    Assigns to the displayName property on the base component.

    Arguments

      @@ -445,7 +445,7 @@

      Example

    setPropTypes(propTypes)

    -

    +

    Assigns to the propTypes property on the base component.

    Arguments

      @@ -459,7 +459,7 @@

      Example

    setStatic(key, value)

    -

    +

    Assigns a value to a static property on the base component.

    Arguments

      @@ -474,7 +474,7 @@

      Example

    shouldUpdate(test)

    -

    +

    Higher-order component version of shouldComponentUpdate(). The test function accepts both the current props and the next props.

    @@ -490,7 +490,7 @@

    Example

    toClass()

    -

    +

    Takes a function component and wraps it in a class. This can be used as a fallback for libraries that need to add a ref to a component, like Relay. If the base component is already a class, it returns the given component.

    @@ -502,7 +502,7 @@

    Example

    withContext(childContextTypes, getChildContext)

    -

    +

    Provides context to the component's children. childContextTypes is an object of React prop types. getChildContext() is a function that returns the child context. Use along with getContext().

    @@ -519,7 +519,7 @@

    Example

    withHandlers(handlerFactories)

    -

    +

    Takes an object map of handler creators or a factory function. 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 @@ -541,7 +541,7 @@

    Example

    withObs(obsMapper)

    -

    +

    Takes observables from the context and special observable props$ an map them to a new set of observables.

    Arguments

    @@ -556,7 +556,7 @@

    Example

    withProps(propsMapper)

    -

    +

    Like mapProps(), except the newly created props are merged with the owner props. Instead of a function, you can also pass a props object directly. In this form, it is similar to defaultProps(), except the provided props take precedence over @@ -573,7 +573,7 @@

    Example

    withPropsOnChange(shouldMapOrKeys, createProps)

    -

    +

    Like withProps(), except the new props are only created when one of the owner props specified by shouldMapOrKeys changes. This helps ensure that expensive computations inside createProps() are only executed when necessary. @@ -593,7 +593,7 @@

    Example

    withReducer(stateName, dispatchName, reducer, initialState)

    -

    +

    Similar to withState(), but state updates are applied using a reducer function. A reducer is a function that receives a state and an action, and returns a new state. Passes two additional props to the base component: a state value, and a @@ -614,7 +614,7 @@

    Example

    withState(stateName, stateUpdaterName, initialState)

    -

    +

    Passes two additional props to the base component: a state value, and a function to update that state value. The state updater has the following signature:

    stateUpdater<T>((prevValue: T) => T): void
    stateUpdater(newValue: any): void
    @@ -638,7 +638,7 @@

    Returns

    wrapDisplayName(component, wrapperName)

    -

    +

    Returns a wrapped version of a React component's display name. For instance, if the display name of component is 'Post', and wrapperName is 'mapProps', the return value is 'mapProps(Post)'. Most Recompose higher-order components @@ -659,7 +659,7 @@

    Example

    “Utilities” Methods

    componentFromProp(prop)

    -

    +

    Creates a component that accepts a component as a prop and renders it with the remaining props.

    Arguments

    @@ -674,7 +674,7 @@

    Example

    compose([funcs])

    -

    +

    This method is similar to lodash flowRight. It permits to easily compose several high order components.

    Arguments

    @@ -689,7 +689,7 @@

    Example

    createEagerElement(type, [props], [children])

    -

    +

    React elements are lazily evaluated. But when a higher-order component renders a functional component, the laziness doesn't have any real benefit. createEagerElement() is a replacement for React.createElement() that checks @@ -710,7 +710,7 @@

    Example

    createEagerFactory(type)

    -

    +

    The factory form of createEagerElement(). Given a component, it returns a factory.

    Arguments

    @@ -726,7 +726,7 @@

    Example

    createEventHandler()

    -

    +

    Returns an object with properties handler and stream. stream is an observable sequence, and handler is a function that pushes new values onto the sequence. Useful for creating event handlers like onClick.

    @@ -738,7 +738,7 @@

    Example

    createHelper(hoc, helperName, [noArgs=false])

    -

    +

    Utility method that gives to higher-order components a comprehensive display name.

    Arguments

      @@ -754,7 +754,7 @@

      Example

    createSink(callback)

    -

    +

    Creates a component that renders nothing (null) but calls a callback when receiving new props.

    Arguments

    @@ -769,7 +769,7 @@

    Example

    getDisplayName(component)

    -

    +

    Returns the display name of a React component. Falls back to 'Component'.

    Arguments

      @@ -783,7 +783,7 @@

      Example

    hoistStatics(hoc)

    -

    +

    Augments a higher-order component so that when used, it copies non-react static properties from the base component to the new component. This is helpful when using Recompose with libraries like Relay. @@ -803,7 +803,7 @@

    Example

    identity(value)

    -

    +

    This method is similar to lodash identity. It returns the first argument it receives.

    Arguments

      @@ -817,7 +817,7 @@

      Example

    isClassComponent(value)

    -

    +

    Returns true if the given value is a React component class.

    Arguments

      @@ -831,7 +831,7 @@

      Example

    isReferentiallyTransparentFunctionComponent(value)

    -

    +

    Returns true if the given value is a referentially transparent function component. A referentially transparent function component is a component without any other thing expect taking some props and returning a component. diff --git a/package.json b/package.json index 73323fa..04d4769 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "recompact", - "version": "3.2.0", + "version": "3.2.1", "description": "A set of React high order components based on Rx.", "main": "recompact.js", "repository": {