open-index/open-npm huggingface dataset:
npm package: @maanex/nuxt-apollo-upload
Description: <h2 align="center">Nuxt Apollo</h2>
Latest version: 5.0.0

# This is a temporary fork to be able to use apollo-upload-client in a nuxt3 project. Once the PR on @nuxtjs/apollo adding this feature gets merged this repo will get deleted.

<h2 align="center">Nuxt Apollo</h2>

<p align="center">Effortlessly integrate GraphQL into your Nuxt 3 projects.</p>

<p align="center">
  <!-- <a href="https://github.com/nuxt-community/apollo-module/actions?query=branch%3Amain+event%3Apush">
    <img alt="CI" src="https://github.com/nuxt-community/apollo-module/actions/workflows/ci.yml/badge.svg?branch=main"/>
  </a> -->
  
  <a href="https://npmjs.com/package/@nuxtjs/apollo/v/next">
      <img alt="Version" src="https://img.shields.io/npm/v/@nuxtjs/apollo/next?color=blue&style=flat-square"/>
  </a>
  
  <a href="https://npmjs.com/package/@nuxtjs/apollo/v/next">
      <img alt="Downloads" src="https://img.shields.io/npm/dt/@nuxtjs/apollo/next?color=blue&style=flat-square"/>
  </a>
  
  <a href="https://opensource.org/licenses/MIT">
      <img alt="MIT" src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square"/>
  </a>
</p>

❯  [📖 Documentation](https://apollo.nuxtjs.org)

---

**Note:** This branch is for **Nuxt 3** compatible module. Checkout the [`v4` branch](https://github.com/nuxt-modules/apollo/tree/v4) for **Nuxt 2** support. 

---

## Preview

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/nuxt-apollo-demo)

## Development

- Clone this repository
- Ensure you have the latest LTS version of Node.js installed
- Run `corepack enable`
- Install dependencies using `pnpm install`
- Start playground with `pnpm dev`

## License

[MIT License](./LICENSE)
npm package: @maaniksharma/useform
Description: A custom React hook for managing form state
Author: Maanik Sharma
Latest version: 1.0.3

# useForm Hook

A custom React hook for managing form state. This hook simplifies form handling by providing an easy way to manage form fields, their values, and validation.

## Installation

To install the `useForm` hook, run:

```bash
npm install @maaniksharma/useform
```

### `useForm`

The `useForm` hook manages the state of form fields.

#### Parameters

- `initialFormFields`: An array of form field objects.

#### Returns

- `formFields`: An array of form field objects with their current values.
- `getFormFieldValue`: A function to get the value by the name of field.
- `validateValue`: A function which return the boolean after validating the value with validateFunction passed before
- `changeValue`: A function which you will pass to onChange event to update the value in form fields.

### `prepareFormFields`

The `prepareFormFields` function prepares the initial form fields.

#### Parameters

- `initialFormFields`: An array of form field objects.

#### Returns

- An array of form field objects with default values.

## Usage example

```tsx
import React from "react";
import FormHeader from "./FormHeader.ContactForm";
import FormField from "./FormField.ContactForm";
import { contactFormInputs } from "../../constants";
import useForm, { prepareFormFields } from "../../hooks/useForm";
import Button from "../ui/Button";

const ContactForm = () => {
  const initialFormFields = prepareFormFields(contactFormInputs);

  const { formFields, changeValue, validateValue, getFormFieldValue } =
    useForm(initialFormFields);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    const isValid = formFields.every((field) => validateValue(field.name));
    if (isValid) {
      // Handle form submission
      console.log(formFields);
      console.log("Form validation success");
    } else {
      console.log(formFields);
      console.log("Form validation failed");
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="flex flex-col gap-[20px] p-[16px] bg-primary-100 lg:w-[732px] items-start"
    >
      <FormHeader />
      <div className="w-full flex flex-col gap-[16px] pl-[6px] lg:pl-[10px]">
        {contactFormInputs.map((input, index) => (
          <FormField
            key={index}
            input={input}
            value={getFormFieldValue(input.name)}
            onChange={(e) => changeValue(input.name, e.target.value)}
          />
        ))}
        <div className="inline-block">
          <Button isContrast type="submit">
            Submit
          </Button>
        </div>
      </div>
    </form>
  );
};

export default ContactForm;
```

### Explanation

**License**: MIT

**Author**: Maaniksharma

**Repository**: (https://github.com/Maaniksharma/useform).