# canathus

> Custom form hook for React

Latest version **1.0.21** (published 2023-08-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install canathus
pnpm add canathus
yarn add canathus
bun add canathus
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.21 |
| Published | 2023-08-28 |
| First published | 2023-07-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | enscrybe |
| Maintainers | oflint_ |

## Links

- npm: https://www.npmjs.com/package/canathus
- Repository: https://github.com/oflint-1/cantharus
- Homepage: https://oflint-1.github.io/canathus/
- Issues: https://github.com/oflint-1/cantharus/issues
- npm.io page: https://npm.io/package/canathus

## Recent versions

- 1.0.21 (latest) — 2023-08-28
- 1.0.20 — 2023-08-06
- 1.0.19 — 2023-08-06
- 1.0.18 — 2023-08-01
- 1.0.17 — 2023-08-01
- 1.0.16 — 2023-08-01
- 1.0.15 — 2023-08-01
- 1.0.14 — 2023-08-01
- 1.0.13 — 2023-08-01
- 1.0.12 — 2023-08-01
- 1.0.11 — 2023-08-01
- 1.0.10 — 2023-08-01
- 1.0.9 — 2023-08-01
- 1.0.8 — 2023-08-01
- 1.0.7 — 2023-07-31

## README

# Canathus
Custom form hook for React

Documentation: https://oflint-1.github.io/canathus/

# Getting Started
A guide to getting started with using canathus in your projects. 

## --Installation--

Canathus can be installed into your react application with one command:
```sh
npm install canathus
```

## --Basic Example--

This is a small example usage, to get up and running with canathus
```tsx
import { useInput, validate } from "canathus";

export function App() {
    // Setup input with validator
    const [title, setTitle] = useInput<string>("", (value) => {
        const valid = value.length > 0;
        return {
            valid,
            errorMsg: valid ? "" : "This field is required",
        };
    });

    const handleSubmit = (e: any) => {
    e.preventDefault();
    // Validate fields
    console.log(validate({ title }));
    };

    return (
    <form onSubmit={(e) => handleSubmit(e)}>
        <input
            value={title.value}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Enter a title"
        />
        <button>submit</button>
    </form>
    );
}
```

## --Creating Input Data--

In canathus, you use the useInput hook to create input data. It takes two arguments, a default value and then a validator function. The validator function is run whenever you validate your input.
```tsx
const [data, setData] = useInput("test", validator);
```

Here, we are setting the default value as "test", and setting a validator function.

## --Custom Validators--

Canathus is built to use custom validation for input data. The validator should return an object containing whether the current value is valid, and what the error message is.

Below is an example validator, which checks the length of a string:
```tsx
const validator = (value) => {
    const valid = value.length > 0;
    
    return {
        valid,
        errorMsg: valid ? "" : "This field is required",
    };
};
```


## --Recommended Workflow--

For readability purposes, it is recommended to store your validator functions in a separate directory called validators. These can then be imported into your react component containing the form.

First we can create our validator:
```tsx
/* validators/lengthValidator.ts */
export const lengthValidator = (value: string) => {
    const valid = value.length > 0;
    
    return {
        valid,
        errorMsg: valid ? "" : "This field is required",
    };
};
```

Now we can use this within our form: 
```tsx
/* App.ts */
import { useInput, validate } from "canathus";
import { lengthValidator } from "./validators/lengthValidator.js"

export function App() {
    // Setup input with validator
    const [title, setTitle] = useInput<string>("", lengthValidator);

    const handleSubmit = (e: any) => {
    e.preventDefault();
    // Validate fields
    console.log(validate({ title }));
    };

    return (
    <form onSubmit={(e) => handleSubmit(e)}>
        <input
            value={title.value}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Enter a title"
        />
        <button>submit</button>
    </form>
    );
}
```

---
_Source: https://npm.io/package/canathus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._