Seolhun/memory-form

To snapshot form values

memory-form

Goal

• Memorizing values
• Time travel changing value
• Multi support framework

How to use

# For JS
npm install @seolhun/memory-form

# For React
npm install @seolhun/memory-form-hooks

Javascript

// FormValue
import { FormValue } from '@seolhun/memory-form';

const formValue = new FormValue<number>(0, {
  onValidation: (value: number) => {
    if (value > 10) {
      return 'Over 10';
    }
    return '';
  },
});
formValue.value; // 0
formValue.setValue(11)
formValue.hasError; // true
formValue.error; // 'Over 10';
formValue.toValue().hasError; // true
formValue.toValue().error; // 'Over 10';

// FormGroup
import { FormGroup } from '@seolhun/memory-form';

interface User {
  name: string;
  age: number;
}

const user = {
  name: 'seol',
  age: 20,
};

const formGroup = new FormGroup<User>(user,
  age: {
    onValidation: (newValue) => {
      if (newValue !== 20) {
        return 'Has Changed';
      }
      return '';
    },
  },
});
formGroup.form.name.value; // 'seol'
formGroup.form.age.toValue().value; // 20
Object.assign(user, {
  age: 25,
});
formGroup.setValue(user)
formGroup.form.age.error; // 'Has Changed';
formGroup.toValue().age.error; // 'Has Changed';

// undo
formGroup.undo();
formGroup.form.age.toValue().value; // 20
// redo
formGroup.redo();
formGroup.form.age.toValue().value; // 25

React

// useFormValue
import { useFormValue } from '@seolhun/memory-form-hooks';

const formValue = useFormValue<number>(0, {
  onValidation: (value: number) => {
    if (value > 10) {
      return 'Over 10';
    }
    return '';
  },
});
formValue.value(); // 0
formValue.setValue(11)
formValue.hasError; // true
formValue.error; // 'Over 10';
formValue.toValue().hasError; // true
formValue.toValue().error; // 'Over 10';

import { useFormGroup } from '@seolhun/memory-form-hooks';

// useFormGroup
interface User {
  name: string;
  age: number;
}

const user = {
  name: 'seol',
  age: 20,
};

const formGroup = useFormGroup<User>(user,
  age: {
    onValidation: (newValue) => {
      if (newValue !== 20) {
        return 'Has Changed';
      }
      return '';
    },
  },
});
formGroup.value(); // { "name":"selhun", "age": 20 }
formGroup.form.name.value; // 'seol'
formGroup.form.age.toValue().value; // 20
Object.assign(user, {
  age: 25,
});
formGroup.setValue(user)
formGroup.form.age.error; // 'Has Changed';
formGroup.toValue().age.error; // 'Has Changed';

Scripts

Build

npm ci
npm run bs
npm run build

Test

npm run test

npm run lint