react-redux-typescript-guide
react-redux-typescript-guide copied to clipboard
piotrwitek
suggestion: recompose examples
I found this document to be very helpful! Thank you for putting it together.
It might be useful to add some typescript examples of recompose
That's an interesting suggestion, unfortunately I'm not using recompose on daily basis but this is something I was interested in learning at some point. btw. contributions are welcomed :)
@arolson101 why do you think recompose examples belongs here? I believe it's completely different topic
@r00ger for example, the withState example is a recompose component. They're just useful for making higher order components.
In my case I have been using something like this:
component.tsx
import React from 'react';
import { compose } from 'recompose';
import { withTranslations, WithTranslationsProps } from './i18n';
import { toggable, ToggableHandlers, ToggableState } from './toggable';
export type ComponentOwnProps = {
className?: string;
disabled?: boolean;
bar: string;
}
export type ComponentProps = ComponentOwnProps
& WithTranslationsProps
& ToggableHandlers
& ToggableState;
export const Component = compose<ComponentProps, ComponentOwnProps>(
withTranslations,
toggable,
)((props: ComponentProps) => {
const { className, disabled, toggle, isOpen, i18n } = props;
return (
<div className={className} disabled={disabled}>
<button onClick={toggle}>{isOpen ? i18n('Close') : i18n('Open')}</button>
</div>
);
});
toggable.tsx
export type ToggableState = typeof initState;
export type ToggableHandlers = {
toggle: () => ToggableState;
setIsOpen: (isOpen: boolean) => ToggableState;
};
const initState = {
isOpen: false,
};
const handlers = {
toggle: (state: ToggableState) => () => ({ isOpen: !state.isOpen }),
setIsOpen: () => (isOpen: boolean) => ({ isOpen }),
};
export const toggable = Recompose.withStateHandlers<
ToggableState,
ToggableHandlers
>(initState, handlers);
Hope it helps
Planned work:
- add a new recompose section with setup instructions
- add usage code examples of the most common recompose API in the playground project
- add autogeneration of docs based on code examples based on their implementation
- include code examples in the build pipeline (format, lint, typecheck etc.)
https://github.com/acdlite/recompose
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.
