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. 🚨

<stencil-form /> is heavily inspired by Formik and react-beautiful-dnd (both React-based solutions), except relying Web Components and standard, built-in browser features.

Example Usage

import { FormRenderProps } from "stencil-form";
interface FormValues {
  demo: string;
}

// In the `your-component` render function
<stencil-form
  initialValues={{ demo: "Hello world!" }}
  renderer={(props: FormRenderProps<FormValues>) => {
    const { errors, groupProps, labelProps, inputProps, formProps } = props;
    return (
      <form {...formProps}>
        <div {...groupProps("demo")}>
          <label {...labelProps("demo")}> Demo </label>
          <input {...inputProps("demo")} type="text" required />
          {errors.demo && (
            <label class="error" {...labelProps("demo")}>
              {errors.demo}
            </label>
          )}
        </div>
      </form>
    );
  }}
/>;

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.

In order to allow maximum flexibility, <stencil-form /> does not use Shadow DOM. If the ::part and ::theme 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.

lerna bootstrap
cd packages/demo
npm start

Issue when used with the React wrapper.

Hi Team, I created a HOC component named which takes in few props like validationSchema, initialValues(model) etc and uses a renderProp pattern to render form control.
`let formSchema = [] // array of form controls.
<FwForm
initialValues={formInitialValues}
validationSchema={formValidationSchema}
initialErrors={formInitialErrors}
renderer={(props: any) => {
const {
errors,
formProps,
labelProps,
inputProps,
checkboxProps,
selectProps,
touched,
} = props;
return (

            {formSchema.fields.map((field) => {
              let cmp: any;
              switch (field.type) {
                case 'input':
                  cmp = (
                    <>
                      <FwInput
                        {...inputProps(field.name, field.inputType)}
                        type={field.inputType}
                        label={field.label}
                        name={field.name}
                        placeholder={field.placeholder}
                        required={field.required}
                      ></FwInput>
                      {touched[field.name] && errors[field.name] && (
                        <label class='error' {...labelProps(field.name)}>
                          {' '}
                          {errors[field.name]}{' '}
                        </label>
                      )}
                    </>
                  );
                  break;

                default:
                  cmp = <p>unknown</p>;
                  break;
              }
              return <div key={field.name}>cmp</div>;
            })}
            <button type='submit'>Submit</button>
          </form>
        </div>
      );
    }}
  ></FwForm>`

FwForm takes a renderer function as a prop and renders the items dynamically. This works fine in a webcomponent level. When I use it with a React Wrapper like above , it's failing with.

TypeError: Cannot add property $elm$, object is not extensible

Am using a render Prop pattern here, where fw-form takes a function as a prop and renders the components dynamically. But this concept is failing with a React wrapper 😞

natemoo-re / stencil-forms Goto Github PK

stencil-forms's Introduction

Stencil Forms

Example Usage

Styling

Installation

stencil-forms's People

Contributors

Stargazers

Watchers

Forkers

stencil-forms's Issues

Issue when used with the React wrapper.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent