Swan Form is a toolbox for elegantly creating forms with React.
These packages are new, so there might be a few bugs to work out.
Pick and choose what packages you want to use.
npm install --save @swan-form/fieldThe main component to use is the Field component. If you want to compose fields or create new ones, then do so with the asField HOC.
Setting the a form's autoComplete value to off will override all fields and have those set to off as well. However, you will see mixed results when trying to set 'autoComplete' to off because most modern browsers will still attmept to autocomplete the field even if the form and the field are set to 'off'.
See this MDN note for more information.
Formatters format the value of text fields as you type them. For instance, if you want to make a quick formatter to properly format Social Security Numbers, you can do the following:
import { createFormatter } from '@swan-form/helpers';
const numbersOnly = value => value.replace(/[^0-9]{1,}/gi, '');
const SSNFormatter = createFormatter(numbersOnly, '___-__-____');
To use it, you would then do the following:
<Field name="ssn" type="text" format={SSNFormatter} />You can use formatters without the createFormatter function. The function signature for formatters is:
const formatter = (value, cursor = null) => [formattedValue, newCursorPosition];npm install --save @swan-form/formYou must pass an onSubmit handler to the form. This should be a function that will just run.
If you want to store your values in Redux or some other kind of state management, then you can pass an onChange function.
npm install --save @swan-form/slider@todo document
This is a Lerna monorepo (using yarn workspaces) so that we can isolate the packages so that people can pick and choose what they want to use without installing the whole lot.
To start, you should run yarn run bootstrap, which will install the dependencies for all the packages in the root node_modules directly and link each package's dependencies as well as create links for each package.
Some convenience tooling is also made possible with nps, but each nps script has an npm equivalent. So, if you want to have Babel watch all the packages and start the example project, you can run yarn run dev.
Uses prettier and husky to ensure that files are looking good before you commit them.
Uses AirBnB's eslint config — one shared across all packages.
Publishing will be done by verified publishers. If you are one or have become one please follow these steps to start publishing swan-from.
- Sign up for NPM.
- Get added as a collaborator for
@swan-form - Put out a PR with your change and get it merged into main.
yarn buildnpm loginyarn loginnpx lerna publish
- Expand Readme
- Better docs
- Improve test coverage
Apache © Eave