From 280060a69fdb7ae89df9753b2d7e887020294be3 Mon Sep 17 00:00:00 2001 From: Sagar Dwivedi Date: Tue, 21 Jan 2025 06:17:38 +0530 Subject: [PATCH] docs: Add package manager examples for TanStack Form installation (#1120) Updated the installation documentation to include examples for using npm, pnpm, bun, and yarn. Each framework adapter (React, Vue, Angular, Solid, Lit) now includes commands for all four package managers. Additionally, added detailed examples for installing validator adapters (Zod, Yup, Valibot) with all supported package managers. This ensures comprehensive guidance for developers regardless of their preferred package management tool. --- docs/installation.md | 78 +++++++++++++++++++++++++++++++++++++++----- 1 file changed, 70 insertions(+), 8 deletions(-) diff --git a/docs/installation.md b/docs/installation.md index 56baebb57..f7d9e2f03 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -3,28 +3,90 @@ id: installation title: Installation --- -TanStack Form is compatible with various front-end frameworks, including React, Vue, and Solid. To use TanStack Form with your desired framework, install the corresponding adapter via NPM: +TanStack Form is compatible with various front-end frameworks, including React, Vue, and Solid. To use TanStack Form with your desired framework, install the corresponding adapter via your preferred package manager: +### React Example ```bash +# npm $ npm i @tanstack/react-form -# or +# pnpm +$ pnpm add @tanstack/react-form +# bun +$ bun add @tanstack/react-form +# yarn +$ yarn add @tanstack/react-form +``` + +### Vue Example +```bash +# npm +$ npm i @tanstack/vue-form +# pnpm $ pnpm add @tanstack/vue-form -# or +# bun +$ bun add @tanstack/vue-form +# yarn +$ yarn add @tanstack/vue-form +``` + +### Angular Example +```bash +# npm +$ npm i @tanstack/angular-form +# pnpm +$ pnpm add @tanstack/angular-form +# bun +$ bun add @tanstack/angular-form +# yarn $ yarn add @tanstack/angular-form -# or +``` + +### Solid Example +```bash +# npm +$ npm i @tanstack/solid-form +# pnpm +$ pnpm add @tanstack/solid-form +# bun +$ bun add @tanstack/solid-form +# yarn $ yarn add @tanstack/solid-form -# or +``` + +### Lit Example +```bash +# npm +$ npm i @tanstack/lit-form +# pnpm $ pnpm add @tanstack/lit-form +# bun +$ bun add @tanstack/lit-form +# yarn +$ yarn add @tanstack/lit-form ``` > Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourselves. In addition, we support Zod, Yup, and Valibot as validators through official validator packages: +### Validator Adapters ```bash +# npm $ npm i @tanstack/zod-form-adapter zod -# or $ npm i @tanstack/yup-form-adapter yup -# or $ npm i @tanstack/valibot-form-adapter valibot -``` + +# pnpm +$ pnpm add @tanstack/zod-form-adapter zod +$ pnpm add @tanstack/yup-form-adapter yup +$ pnpm add @tanstack/valibot-form-adapter valibot + +# bun +$ bun add @tanstack/zod-form-adapter zod +$ bun add @tanstack/yup-form-adapter yup +$ bun add @tanstack/valibot-form-adapter valibot + +# yarn +$ yarn add @tanstack/zod-form-adapter zod +$ yarn add @tanstack/yup-form-adapter yup +$ yarn add @tanstack/valibot-form-adapter valibot