react-adapt-value v0.0.0

react-adapt-value

Getting started

Usage

To avoid duplication, you can wrap <AdaptValue> in your own wrapper component:

function Rot13ValueAdapter(props) {
  return (
    <AdaptValue
      parentToChildValue={rot13}
      onChangeAdapter={onChangeForParent => ({ target: { value } }) => onChangeForParent(rot13(value), value)}
      {...props}
    />
  )
}

        <Rot13ValueAdapter
          onChange={(parentValue, value) => { setParentValue(parentValue) }}
          value={text_parentValue}
        >
          {({childValue, onChange}) => (<>
            <input type="text"
              value={childValue}
              onChange={onChange}
            />
          </>)}
        </Rot13ValueAdapter>

...

If you need even more control, you can use the provided useAdaptValue.

Frequently anticipated questions

Should I use AdaptValue or AdaptValue_?

AdaptValue_ is an injector component and provides a more concise syntax. That is its main advantage. Its disadvantages are:

1. It is inflexibile. You can't, for example, wrap multiple elements.
2. It is harder to understand
3. Since it uses React.cloneElement, it adds no new components/elements to the tree, so if you inspect it in the React Components dev tool, you may be surprised to see AdaptValue_ listed in the tree — without any children. Your child component won't be listed because this component takes its place.

AdaptValue uses the "children as function" pattern, which means you have to provide a children prop that is a function. That function, when called, can return any elements, it is more flexible than the injector component pattern.

The AdaptValue option is also more explicit: You can see exactly which values are yielded to your children, and you are responsible for connecting those values to your child element(s), which makes it easier to follow the flow of data and understand what it is doing.