refract icon indicating copy to clipboard operation
refract copied to clipboard

Add toCallback

Open thisRaptori opened this issue 5 years ago • 2 comments

So far every time I've used Refract I've built this exact functionality into every custom handler - think it makes sense for this to be included in the library!

Similar to toProps and asProps, it's a helper function which triggers a special case in the combined effect handler. It's called like toCallback('propName')('data'); if props.propName exists, it calls props.propName('data')! 🎉

This is super useful when building reusable components - for example my go-to example of a debounced input component would look like this:

import { withEffects, toCallback, toProps } from 'refract-rxjs'
import { BehaviorSubject, merge, of } from 'rxjs'
import { debounceTime, map, startWith } from 'rxjs/operators'

import Input from './Input'

const aperture = (component, { timeout = 300, value = '' }) => {
	const value$ = new BehaviorSubject(value)
	const onChange = e => value$.next(e.target.value)

	const onChange$ = value$.pipe(
		map(toCallback('onChange'))
	)
	const onCommit$ = value$.pipe(
		debounceTime(timeout),
		map(toCallback('onCommit')),
	)
	const render$ = value$.pipe(
		map(value => toProps({ value })),
	)

	return merge(
		of(toProps({ onChange })),
		render$,
		onChange$,
		onCommit$,
	)
}

export default withEffects(aperture)(Input)

thisRaptori avatar Jan 10 '20 17:01 thisRaptori

Hi... Is the project still alive?

brettz9 avatar Jan 14 '21 23:01 brettz9

Hi... Is the project still alive?

Hey! Yes and no - it's still in use and any bugs or issues (and potentially feature requests from others) would be sorted out, but neither me nor @troch work with it day-to-day any more, so we don't personally need to add anything to it. Still 100% recommend it and would use it in future projects where appropriate!

thisRaptori avatar Jan 18 '21 12:01 thisRaptori