bear-out

🐻 Bear Out

Problem

Using React forms libraries never quite solved the problems we were faced with. Many require context or a <form> element and are confusing to perform validation. It's just too much overhead if you are creating a simple form with 1-2 fields.

Solution

Bear Out is a high performance, no dependency and no frills library with the intent of giving you primitives to do simple form/field management and validation without a lot of overheard.

What's with the name?

According to Merriam-Webster, the definition of bear out is:

to give evidence or testimony to the truth or factualness of

Bear Out gives you the tools to validate (give evidence or testimony) your application's inputs (truth or factualness).

It's a stretch...

Quick Start

Installation

npm add bear-out

or

yarn install bear-out

Build a simple counter

Here we're building a counter that allows you to change the value via numbers or by modifying the input itself.

const Counter = () => {
  const { value, setValue, inputProps } = useBearOutField(0);

  const increment = () => setValue(v => v + 1);
  const decrement = () => setValue(v => v - 1);
  const addValue = (num: number) => setValue(v => v + num);

  return (
    <div>
      <h1>useBearOutField</h1>
      <div title="counter">{value}</div>
      <div>
        <input type="number" {...inputProps} />
      </div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={() => addValue(2)}>Add Two</button>
    </div>
  );
};