I'm trying to use the context addon for input-based components.
For example:
import { useEffect } from 'react';
import { withReactContext } from 'storybook-react-context';
const InputWrapper = ({ value, children }) => (
<div>
<p>{value}</p>
{children}
</div>
);
export default {
component: InputWrapper,
title: 'InputWrapper',
};
export const Input = (args, { context: [ state, dispatch ] }) => {
const handleChange = (e) => {
const { target: { value } } = e;
dispatch({ value });
};
useEffect(() => {
console.info('mount');
return () => {
console.info('unmount');
}
}, [])
return (
<InputWrapper value={state.value}>
<input type="text" value={state.value} onChange={handleChange} />
</InputWrapper>
);
};
Input.decorators = [withReactContext({
initialState: {
value: 'Hello',
},
})];
Input.args = {};
I'm noticing that on every dispatch (input value change) story is re-mounted.
Is there a way to avoid that, because on each keystroke input is re-mounted and focus is lost?