proppy
Functional props composition for components
Guide
Installation
With npm:
$ npm install --save proppy
Via unpkg CDN:
Usage
Single functions
Let's first import a function of our choice:
;
Now we can create our factory:
const P = ;
The factory function can now be called to get the instance:
const p = ;
Accessing props:
console;// { counter: 0, setCounter: Function } pprops; console;// 5
Destroying the instance:
p;
Composition
You can also compose multiple factories together using the compose
function:
; const P = ;
You can now get your instance by calling the returned function:
const p = ; console;// {// foo: 'foo value',//// counter: 0,// setCounter: Function,//// age: 20,// setAge: Function// }
Providers
Providers are values which are made accessible to instances.
When we call our factory function to get the instance, we can optionally pass an object that will contain all our providers:
; const P =
Now we can pass the providers
object when calling P
:
const p = ; console;// {// foo: 'foo value',// bar: 'bar value',// }
Subscription
Subscribing to props changes:
const unsubscribe = p;
To Unsubscribe:
;
API
withProps
withProps(props)
withProps((currentProps, providers) => props)
Used for generating initial props.
Examples:
Directly passing the props object:
const P = ;
Returning the props from a function:
const P = ;
withState
withState(stateName, setterName, initialState)
Used for state management.
Examples:
const P = ;
compose
compose(...factories)
Used for composing multiple factories into a single one.
Examples:
const P = ;
withReducer
withReducer(stateName, dispatcherNAme, reducer, initialState)
For generating props via reducer functions.
Arguments:
stateName
(String
): Name of the prop where state will be setdispatcherName
(String
): Name of the prop for setting dispatch functionreducer
(Function
): Accepting(state, action)
, and returning new stateinitialState
(Any
): Initial state to begin with
Example:
{ } const P = ;const p = ; p;console // { value: 1 }
You can also pass functions to dispatch
:
p;
withHandlers
withHandlers(handlers)
Used for handling side-effects.
Examples:
Basic handler:
const P = ;
A better example with composition:
const P = ; const p = ; p;console; // 1
withStateHandlers
withStateHandlers(initialState, handlers)
Used for state management via handlers.
Examples:
const P = ; const p = ;p;p;console; // 10
withObservable
withObservable((props, providers) => props$)
Used for returning an Observable of props.
Examples:
; const P = ;
For advanced usage, look into proppy-rx
package, where you can also access incoming props as an Observable.
withTimer
withTimer(timer, props)
withTimer(timer, (props, providers) => props)
Sets props after timer has elapsed.
Examples:
// prop `foo` is set after 1 secondconst P = ;
Accessing current props and providers:
const P = ;
onChange
onChange(propName, (prop, providers) => props)
onChange( (prevProps, nextProps) => true, (props, providers) => props )
onChange( propName, (props, providers, cb) => void )
Detect a change in props, and return new props.
Examples:
Change foo
, when counter
changes:
const P = ; const p = ;console; // `initial foo value` pprops;console; // `changed foo with counter 10`
Detecting complex changes:
const P = ;
Returning async props:
const P = ;
map
map((props, providers) => props)
Used for mapping incoming props to returned props.
Examples:
const P = ;
shouldUpdate
shouldUpdate((prevProps, nextProps, providers) => true)
Used for limiting the events
Examples:
const P = ;
didSubscribe
didSubscribe((props, providers) => {})
For handling side-effects upon first subscription.
Examples:
const P =
willDestroy
willDestroy((props, providers) => {})
For handling side-effects when instance is destroyed.
emit
emit((cb, props, providers) => {})
For emitting new props after subscription.
Examples:
const P = ;
handleReceivedProps
handleReceivedProps(true|false)
handleReceivedProps((receivedProps) => {})
Accept props coming from parent instances.
create
create(options)
Convenience function for creating your own functions, that can return factories.
All the other functions in this library are built by using this create
function internally.
Arguments:
options.initialize
(Function
)options.didSubscribe
(Function
)options.willDestroy
(Function
)options.handleReceivedProps
(Boolean
|Function
)
Examples:
A producer of props:
{ return ;}
A mapper of props:
{ return ;}