mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-08 23:59:38 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

Update react intro (#159)

Browse Source 
* updated react intro

* docs: icon page

* add name attr to Submit
This commit is contained in:
Johannes
2022-11-25 04:21:57 -06:00
committed by GitHub
parent 0f638c3f6b
commit 3550a51cea
10 changed files with 123 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -56,7 +56,7 @@ export default function WaitlistForm() {
<Text name="firstname" label="What's your first name?" validation="required" />
<Text name="lastname" label="What's your last name?" />
<Textarea name="about" label="About you" help="Please keep it short" />
<Submit label="Submit" />
<Submit name="submit" label="Submit" />
</Form>
);
}

4
apps/formbricks-com/lib/docsNavigation.ts
View File

@@ -87,6 +87,10 @@ const navigation = [
title: "Style with Tailwind",
href: "/docs/react-form-library/style-tailwind",
},
{
title: "Icons",
href: "/docs/react-form-library/icons",
},
],
},
{

2
apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx
View File

@@ -66,7 +66,7 @@ export default function WaitlistForm() {
<Text name="firstname" label="What's your first name?" validation="required" />
<Text name="lastname" label="What's your last name?" />
<Textarea name="about" label="About you" help="Please keep it short" />
<Submit label="Submit" />
<Submit name="submit" label="Submit" />
</Form>
);
}

BIN
apps/formbricks-com/pages/docs/react-form-library/icons/find-icon-name-react-library-form-builder.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

74
apps/formbricks-com/pages/docs/react-form-library/icons/index.mdx Normal file
View File

@@ -0,0 +1,74 @@
import { Layout } from "@/components/docs/Layout";
import { Callout } from "@/components/shared/Callout";
import Image from "next/image";
import FindIcon from "./find-icon-name-react-library-form-builder.png";
export const meta = {
title: "Icons - Formbricks React Form Library",
};
Icons give forms and surveys not only a professional look & feel, they increase the usability. Formbricks React supports icons in several locations throughout the form.
### Choosing an icon library
In the first step you have to decide which library you like. We like:
- [HeroIcons](https://heroicons.com/),
- [FeatherIcons](https://feathericons.com/) (beautiful but limited),
- [React Icons](https://react-icons.github.io/react-icons/). (huge collection)
### Installing library package
Once you picked yours you have to add it to your repository, e.g. HeroIcons:
```jsx
npm install @heroicons/react
```
### Importing icons
Next you have to import the icons you want to use them in your form:
```jsx
import { PlusIcon } from "@heroicons/react/24/outline";
# or several at once
import { ChatBubbleOvalLeftEllipsisIcon, EnvelopeIcon } from "@heroicons/react/24/solid";
```
If you paid close attention you noticed that we imported `PlusIcon` from the `outline` folder and the latter two from the `solid` folder. You can find the name of the icon you'd like to import on the respective website:
<Image
src={FindIcon}
alt="Illustration of error message and validation handling in best form react lib"
className="rounded-lg"
/>
Now you're ready to use them!
### Using icons
At this early stage, we only support icons in the submit button. You add it **before** and **after** the button text.
Before the button text:
```jsx
<Submit label="Submit" PrefixIcon={EnvelopeIcon} />
```
After the button text:
```jsx
<Submit label="Submit" SuffixIcon={PlusIcon} />
```
### Props & Attributes
| Prop | Type | Default | Description |
| ---------- | ---- | ------- | --------------------------- |
| PrefixIcon | SVG | - | Icon displayed before label |
| SuffixIcon | SVG | - | Icon displayed after label |
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

10
apps/formbricks-com/pages/docs/react-form-library/input-submit/index.mdx
View File

@@ -9,11 +9,19 @@ export const meta = {
The submit button component is very straight forward:
```jsx
<Submit label="Submit" />
<Submit name="submit" label="Submit" />
```
To keep it working make sure that there is **only one Submit button** per form.
### Adding an icon
You can add icons **before and after** the button text:
```jsx
<Submit label="Submit" PrefixIcon={BeakerIcon} SuffixIcon={BeakerIcon} />
```
### Props & Attributes
| Prop | Type | Default | Description |

18
apps/formbricks-com/pages/docs/react-form-library/introduction/index.mdx
View File

@@ -4,16 +4,14 @@ import Image from "next/image";
import StyleClasses from "./sampleform.png";
export const meta = {
title: "React Form Library",
title: "Building React forms just got easy",
};
## Building React forms has never been quicker.
Every developer works with forms, few like their experience. Building Forms, especially in React, can be pretty annoying. State management, validation, form components, accessibility, internationalization and performance are all things you have to deal with, but don't really want to.
We make building - and maintaining - forms easier than ever in the React world.
We make building - and maintaining - forms easier than ever in the world of React.
### Formbricks React Example:
### Example
```jsx
import { Form, Text, Email, Checkbox, Submit } from "@formbricks/react";
@@ -52,7 +50,7 @@ export default function WaitlistForm() {
### Why is this easier already?
- One easy to use syntax for input types including labels, validation and help texts
- One easy to use syntax for all input types
- HTML & non-HTML input types available out of the box
- Easily maintainable with component-based approach
- All characteristics adjustable via props
@@ -64,8 +62,12 @@ export default function WaitlistForm() {
- Multi-page forms
- Accessibility
- Internationalization
- Form Templates
- Form Templates (content & styles)
The Formbricks React Library uses [React Hook Form](https://react-hook-form.com/) to benefit from their easy to use data handling and performance optimizations. The easy to use approach was inspired by the [FormKit for Vue.js](https://formkit.com/) Library.
### Shoutout
The Formbricks React Library is built on top of [React Hook Form](https://react-hook-form.com/) to make from their data handling and performance optimizations.
The developer experience is inspired by the great [FormKit for Vue.js](https://formkit.com/) Library.
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

25
apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx
View File

@@ -16,16 +16,19 @@ We love Tailwind! This is why Formbricks React natively supports Tailwind. All y
Here are all the props you can use to extend the styling of the different form elements:
| CSS class | Prop | Content |
| ------------------- | ----------------- | --------------------------------------------------- |
| formbricks-form | formClassName | The wrapper around the complete form |
| formbricks-outer | outerClassName | The wrapper around label, input field and help text |
| formbricks-help | helpClassName | The help text |
| formbricks-wrapper | wrapperClassName | The wrapper around the label and the input field |
| formbricks-label | labelClassName | The label |
| formbricks-inner | innerClassName | The input field |
| formbricks-input | inputClassName | The input |
| formbricks-message | messageClassName | The validation / error message itself |
| formbricks-messages | messagesClassName | Wrapper around all error messages |
| CSS class | Prop | Content |
| ------------------- | ----------------- | ------------------------------------------------------------ |
| formbricks-form | formClassName | The wrapper around the complete form |
| formbricks-outer | outerClassName | The wrapper around label, input field and help text |
| formbricks-legend | legendClassName | The label of the options group (only radio & checkbox input) |
| formbricks-help | helpClassName | The help text |
| formbricks-options | optionsClassName | A wrapper around all options (only radio & checkbox input) |
| formbricks-option | optionClassName | A wrapper around each option (only radio & checkbox input) |
| formbricks-wrapper | wrapperClassName | The wrapper around the label and the input field |
| formbricks-label | labelClassName | The label |
| formbricks-inner | innerClassName | The input field |
| formbricks-input | inputClassName | The input |
| formbricks-message | messageClassName | The validation / error message itself |
| formbricks-messages | messagesClassName | Wrapper around all error messages |
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

2
apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx
View File

@@ -12,7 +12,7 @@ Validation prevents users from submitting missing of false data.
To add a validation to your inputs, add the `validation` prop and write the rules in string syntax. Rules are divided by a pipe (`|`), e.g.:
```bash
```jsx
<Text name="age" label="What's your age?" validation="required|number|min:0|max:100" />
```

12
apps/formbricks-com/pages/docs/react-form-library/work-with-components/index.mdx
View File

@@ -28,9 +28,16 @@ All imported components will be included in the production build - even when you
| Component | Details | Use |
| -------------- | ------------------- | ------------------------------------------- |
| `<Form />` | Form Wrapper | Handles the onSubmit action, wraps the form |
| `<Email />` | HTML Email Input | Email input |
| `<Number />` | HTML Number Input | Integer or decimal value |
| `<Password />` | HTML Password Input | Strings of all kind |
| `<Phone />` | HTML Tel Input | Phone numbers |
| `<Radio />` | Radio Buttons | Single choice |
| `<Search />` | HTML Search Input | Search terms |
| `<Submit />` | Submit Button | Submits the form |
| `<Text />` | HTML Text Input | Single line of text input |
| `<Textarea />` | HTML Textarea Input | Multiple lines of text |
| `<Submit />` | Submit Button | Submits the form |
| `<URL />` | HTML URL Input | Submits the form |
---
@@ -38,13 +45,12 @@ All imported components will be included in the production build - even when you
| Component | Details | Use |
| ------------------ | ----------------------------- | ----------------------- |
| `<Radio />` | Radio Buttons | Single choice |
| `<Checkbox />` | Checkboxes | Multiple choice |
| `<Rating />` | Star-Rating | Simple rating in steps |
| `<Nps />` | Nps Score | Evaluate experience |
| `<Color />` | Color-Picker | Let user choose a color |
| `<Slider />` | Slider | Stepless rating |
| `<Autocomplete />` | Autocomplete possible options | e.g. Tags |
| `<Payments />` | Ready-made Stripe integration | Process Stripe payments |
and many more...