This document focuses on React, but the same applies to Inferno and Preact
aperture's first argument, which allows you to cause side-effects in response to changes within your React app.
componentobject contains three properties:
observeproperty is a function which let you observe your React props. The
unmountproperties are streams which let you observe your React component's lifecycle.
aperturein the following example to observe different things:
component.observefunction lets you observe your React props. It handles three different use cases: observing values, observing functions, and observing all props.
component.observetakes two optional arguments:
propName(string): an optional string, the name of the prop which you wish to observe.
propTransformer(function): an optional function to transform each received value of
dropoperator in the reactive programming library you use.
component.observewill return a stream of this prop's values as it changes over time.
===- if you need a different change detection mechanism (to exclude more values), it is easy to filter them using a
valueprop in our aperture, and only cause an effect when the new string is at least five characters long:
observe, and only distinct values returned by the transformer will be emitted by the returned observable. It is handy for observing nested values:
component.observewill return a stream which emits a new value each time your function is called. This value will be the first argument passed to the function.
onChangeprop to achieve the same effect as above:
valueexample above (the stream won't be initialised with a value), but in more complex situations it can be extremely useful to observe arguments passed to callbacks in addition to values passed via props.
apertureyou might wish to use the current value of all your component's props. While this is possible via manually calling
component.observe('prop')for each of the props you wish to include and then combining all of the resulting streams, this is a lot of setup for a simple feature.
component.observewill return a stream which emits a new object each time any prop changes. This object will contain all of your component's props. (note: change detection in this case is determined by React: withEffects is implemented as a PureComponent)
handlerevery time one of them changes:
withEffectsinjects a method
pushEventto your components, so you can inform Refract of events happening inside your components. We use a callback because we aim to offer a universal solution not tied to a specific renderer (web, native). That way we don't have to use refs or low-level platform-specific primitives.
pushEventis a curried function which takes an event name (
eventName) and a value:
component.fromEvent. It takes two arguments (second one is optional):
eventName(string): the name of the event which you wish to observe
eventTransformer(function): an optional function to transform the value of each
useEventis available on
component, to make it easier to use events: it returns a tuple containing the result of
useEventtakes two arguments:
eventName(string): the name of the event
seedValue(any): an optional seed value to initialise the stream of event values with
component.mountis a stream which will emit a single value when a component mounts.
component.unmountis a stream which will emit a single value when a component unmounts.