https://github.com/natemoo-re/stencil-forms
📝🤯 Stencil component to automatically manage form state
https://github.com/natemoo-re/stencil-forms
form forms state-management stencil stenciljs
Last synced: 6 months ago
JSON representation
📝🤯 Stencil component to automatically manage form state
- Host: GitHub
- URL: https://github.com/natemoo-re/stencil-forms
- Owner: natemoo-re
- License: mit
- Created: 2019-01-16T14:08:57.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:39:31.000Z (almost 3 years ago)
- Last Synced: 2025-02-07T12:45:42.565Z (8 months ago)
- Topics: form, forms, state-management, stencil, stenciljs
- Language: TypeScript
- Homepage:
- Size: 1.07 MB
- Stars: 14
- Watchers: 2
- Forks: 3
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Stencil Forms
Stencil Forms is a tool for managing complex form state in Stencil projects.
> 🚨 This component is built for Stencil apps, not vanilla Web Component projects. It might be possible to use it in vanilla projects, but I wouldn't recommend it. 🚨
`` is heavily inspired by [Formik](https://github.com/jaredpalmer/formik) and [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) (both React-based solutions), except relying Web Components and standard, built-in browser features.
## Example Usage
```tsx
import { FormRenderProps } from "stencil-form";
interface FormValues {
demo: string;
}
// In the `your-component` render function
) => {
const { errors, groupProps, labelProps, inputProps, formProps } = props;
return (
Demo
{errors.demo && (
{errors.demo}
)}
);
}}
/>;
```
## Styling
Styling is entirely up to you! The component provides minimal, mildly opinionated resets for `input` and `select` elements but stops short of removing things like `::-webkit-inner-spin-button` or `::-ms-clear`. If you'd like to ensure cross-browser consistency, I'd highly reccommend reading [TJ VanToll's pseudo-element list](https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/).
In order to allow maximum flexibility, `` does not use Shadow DOM. If the [`::part` and `::theme`](https://drafts.csswg.org/css-shadow-parts-1/) proposal is rolled out, that might change—for now, Shadow DOM makes it too difficult for developers to implement custom styles.
## Installation
This package in unpublished at the moment. It will be available on NPM soon.
To build locally, just clone this monorepo.
```bash
lerna bootstrap
cd packages/demo
npm start
```