elseu/use-binding

One-line controlled and uncontrolled property binding for React

useBinding

One-line controlled and uncontrolled property binding for React

• Installation
• Use case
• Usage
• Example
• Typescript
• Developer

Installation

npm install use-binding

Use case

When developing React components, you often have to choose between providing a controlled (or "stateless") or uncontrolled ("stateful") version. For instance, if you have a custom Input component, do you:

• Provide a defaultValue prop and manage the state inside your component (uncontrolled), or do you:
• Provide a value prop and expect the parent component to manage state for you (controlled)?

You may end up developing both variants, adding lots of boilerplate code.

useBinding allows you to do both in one line.

Usage

Use this in your component:

const [myValue, setMyValue] = useBinding(
    defaultValue,
    value,
    onChange,
    fallbackValue /* optional */
);

Now use myValue as your property value, and use setMyValue whenever you want to change it. Everything works as expected. That means:

• If the consumer of your component passes a value, that value will be used.
• If the consumer of your component passes a defaultValue, then useBinding will use useState internally to keep track of the current value.
• If both defaultValue and value are empty, then the fallbackValue will be used. The fallbackValue is optional: if you don't provide it either, then myValue will be null.
• If the consumer of your component passed an onChange handler, that handler will be called when using setMyValue.

Example

Consider the Input example above. You can use useBinding like this:

import React from 'react';
import { useBinding } from 'use-binding';

interface IInputProps {
    defaultValue?: string
    value?: string
    onChange?: (newValue: string) => void
}

const CustomInput: React.FC<IInputProps> = ({ defaultValue, value, onChange }) => {
    const [inputValue, setInputValue] = useBinding(defaultValue, value, onChange, '');

    return (
        <input type="text" value={inputValue} onChange={(e: ChangeEvent<HTMLInputElement>) => { setInputValue(e.target.value) })} />
    );
};

This will give consumers of your CustomInput component a lot of options:

// Controlled:
const [value, setValue] = useState('');
<CustomInput value={value} onChange={setValue} />;

// Uncontrolled:
<CustomInput defaultValue="my default" onChange={(newValue: string) => { console.log(newValue); })} />;

// Fixed value:
<CustomInput value="can't change me" />;

Typescript

useBinding supports Typescript and contains generic typings. Of course you can also use it in plain old Javascript.

Developer

Developed by Sebastiaan Besselsen at Sdu Uitgevers, The Netherlands.

use-binding's Issues

[Security] Workflow publish.yml is using vulnerable action actions/checkout

The workflow publish.yml is referencing action actions/checkout using references v1. However this reference is missing the commit a6747255bd19d7a757dbdda8c654a9f84db19839 which may contain fix to the some vulnerability.
The vulnerability fix that is missing by actions version could be related to:
(1) CVE fix
(2) upgrade of vulnerable dependency
(3) fix to secret leak and others.
Please consider to update the reference to the action.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀