Gathering detailed insights and metrics for form-capacitor
capacitor-heartland-form
Capacitor plugin for accepting payment through Heartland SDK
paystack-card-payment
A capacitor plugin form making debit card payment
capacitor-time-format-detector
Determine if system is using 24h or 12h time format
c3-cordova-to-capacitor
A tool to convert Cordova's config.json to Capacitor's capacitor.config.json format.
npm install form-capacitorTypescript
Module System
40.2
Supply Chain
77.4
Quality
81.5
Maintenance
100
Vulnerability
99.6
License
JavaScript (99.8%)
Makefile (0.2%)
Total Downloads
75,234
Last Day
9
Last Week
60
Last Month
364
Last Year
2,415
3 Stars
227 Commits
6 Watching
11 Branches
6 Contributors
Latest Version
1.3.0
Package Id
form-capacitor@1.3.0
Unpacked Size
605.04 kB
Size
165.12 kB
File Count
9
Publised On
09 Mar 2023
Cumulative downloads
Total Downloads
Last day
200%
9
Compared to previous day
Last week
-77.4%
60
Compared to previous week
Last month
104.5%
364
Compared to previous month
Last year
-70.9%
2,415
Compared to previous year
40
Form capacitor is a set of React Hooks that help you manage state, validation and errors for react based forms. This project makes use of mobx / mobx-state-tree for state management and AJV for validation.
Use json-schema to define the state and validation rules for your form then use a few simple Hooks to setup your form state management and validation.
Project Status: A few fun code reviews away from MVP
The @latest version of this project now has reasonable test coverage using some complex form samples with react-testing-library and will soon be considered stable.
For form-capacitor react 16.8 and react-dom 16.8 are peer dependencies as hooks are required
1yarn add react 2yarn add react-dom 3yarn add form-capacitor
This is has changed considerably and I will be working on rewriting the docs soon.
These are the core methods that are used to interact with the underlying mobx-state-tree. Also a function that can help formating error messages.
Create a definition file for your form including any validation rules.
{
"$schema": "http://json-schema.org/draft-07/schema",
"definitions": {
"SimpleForm": {
"title": "Simple Form",
"description": "Basic Form to test form-capacitor without a lot of external stuff",
"type": "object",
"properties": {
"firstName": {
"errorMessage": "Please type a name which consists of words",
"type": "string",
"title": "First Name",
"pattern": "\\w",
"required": [
"firstName"
]
},
"lastName": {
"errorMessage": "Please type a name which consists of words",
"type": "string",
"title": "Last Name",
"pattern": "\\w"
}
},
"required": [
"firstName"
]
}
}
}
Form-capacitor uses mobx 4 (for IE support) and a mobx-state-tree to manage form state. This style of observable based state management allows you to develop forms that only re-render input components where the state has changed for the inputs affected by the User interactions. The data for the form is pre generated into a mobx state tree from the json-schema and then
The reason we chose json-schema to define each form is so that we could have the same validation standard for forms in the browser as the back end service which consumes the data.
Validation can be As You Type or onEvent or Both it is up to you.
Ajv is used to validate data based on the underlying json-schema for the form. The schema is broken up into related elements so that re-renders for error-highlighting and field level error messages is somewhat smart during as you type validation... which you don't have to use The validation only renders the error state for fields who's error state has changed due to a change in the underlying data which triggers a change in the validity of the field.
The schema decorator passes a validation function as a prop to a form component decorated with the schema decorator that will fully validate the entire form data. This works nice if you want to roll your own imperative validation on submit or change in focus or whatever.
Errors can be managed at the consumer/input level via useFieldErrors
or at the form provider level via the props.errorMap observable map tree.
ThegetFlattenedErrors function included in form-capacitor will turn errorMap Tree
into a flat array of error objects.
Run make test to run all the tests.
allOf keyword
No vulnerabilities found.
Reason
security policy file detected
Details
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
Found 3/17 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
license file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
24 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More