react-hooks-binding

React hooks binding is manage states and context like redux just more simple.

Features:

Binding to relative DataContext.
Binding to global DataContext.
Binding Source - default is the relative DataContext, which can be Binding or DataContext.
Binding contextKey - set the source to global DataContext by key value.
Binding Mode - three modes for binding oneWay, twoWay, oneWayToSource.
Binding Path - the path to the binding source property.
Binding convert - way to adjust the real value.
Binding convertBack - way to convert back to real value.
MultiBinding - from multiple sources to one value.

Typescript definitions

Installation

``NPM
npm install react-hooks-binding --save
`

Basic Usage

Wrap your form with DataContext and then useBinding in every place you need to get or set value from DataContext.

Example:

`TSX
import { DataContextProvider } from 'react-hooks-binding';

context={{
payment: {
cardNumber: '',
expiry: '',
cardCode: ''
}
}}
>

;

export default function PaymentView() {
return (
<>




);
}

import { useBinding, BindingMode } from 'react-hooks-binding/build';

export default function CardNumber() {
let cardNumberBinding = useBinding({
path: 'payment.cardNumber',
mode: BindingMode.twoWay,
convert: value => {
let formated = payment.fns.formatCardNumber(value);
return formated;
},
convertBack: (source, value) => {
let cardNumber = string(value).replaceAll(' ', '').s;
return cardNumber;
}
});

return (
value={cardNumberBinding.value}
onChangeText={rawCardNumber => {
cardNumberBinding.setValue(rawCardNumber);
}}
/>
);
}
``