-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #56 from environment-agency-austria/feature/hooks-…
…rewrite Feature/hooks rewrite
- Loading branch information
Showing
122 changed files
with
8,975 additions
and
4,313 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| **/*.snap | ||
| **/*.md |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| react-ocean-forms is a flexible and lightweight framework for rendering and validating forms with React. | ||
|
|
||
| [](https://www.npmjs.com/package/react-ocean-forms) | ||
| [](https://github.com/environment-agency-austria/react-ocean-forms/blob/master/LICENSE) | ||
| [](https://travis-ci.com/environment-agency-austria/react-ocean-forms) [](https://greenkeeper.io/) | ||
| [](https://coveralls.io/github/environment-agency-austria/react-ocean-forms?branch=master) | ||
|
|
||
| ## Installation | ||
| with npm: | ||
|
|
||
| ```bash | ||
| npm install --save-dev react-ocean-forms | ||
| ``` | ||
| or with yarn: | ||
|
|
||
| ```bash | ||
| yarn add --dev react-ocean-forms | ||
| ``` | ||
|
|
||
| ### Optional packages | ||
| The react-ocean-forms package is the core package. While you can use it on it's own, we | ||
| highly recommend adding the [react-ocean-forms-bootstrap](https://github.com/environment-agency-austria/react-ocean-forms-bootstrap) | ||
| package as well. It offers you easy bootstrap (reactstrap) integration. | ||
|
|
||
| If you're using react-intl in your project, add the | ||
| [react-ocean-forms-react-intl](https://github.com/environment-agency-austria/react-ocean-forms-react-intl) | ||
| package for react-intl support. | ||
|
|
||
| ## Getting started | ||
| Assuming that you already have an up and running React app, otherwise please follow the | ||
| [create-react-app](https://github.com/facebook/create-react-app#creating-an-app) guideline. | ||
|
|
||
| After adding the react-ocean-forms package(s) to your project, you can simply import the components you need. | ||
|
|
||
| ```jsx static | ||
| import React from 'react'; | ||
| import { Form, Input } from 'react-ocean-forms'; | ||
|
|
||
| function handleSubmit(values) { | ||
| console.log('form submitted with', values); | ||
| } | ||
|
|
||
| function GettingStarted() { | ||
| return ( | ||
| <Form onSubmit={handleSubmit}> | ||
| <Input name="myInput" label="Example input" /> | ||
| <button type="submit">Submit</button> | ||
| </Form> | ||
| ); | ||
| } | ||
|
|
||
| export default GettingStarted; | ||
| ``` | ||
|
|
||
| For further documentation head to the components section. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| ### Examples | ||
| #### Simple field group | ||
| Showcase of a simple field group | ||
|
|
||
| ```jsx | ||
| import { Form, FieldGroup, Input } from 'react-ocean-forms'; | ||
|
|
||
| function Example() { | ||
| // Submit callback, here you'd make your api calls | ||
| const handleSubmit = (values) => { | ||
| console.log('onSubmit, values: ' + JSON.stringify(values)); | ||
| }; | ||
|
|
||
| // Notice how a field group creates a sub object | ||
| const defaultValues = { | ||
| myGroup: { | ||
| myInput1: 'input 1', | ||
| myInput2: 'input 2', | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Form | ||
| className="demo" | ||
| onSubmit={handleSubmit} | ||
| defaultValues={defaultValues} | ||
| > | ||
| <FieldGroup | ||
| name="myGroup" | ||
| label="Example group" | ||
| render={() => { | ||
| return ( | ||
| <React.Fragment> | ||
| <Input name="myInput1" label="Example input" /> | ||
| <Input name="myInput2" label="Example input 2" /> | ||
| </React.Fragment> | ||
| ); | ||
| }} | ||
| /> | ||
| <button type="submit">Submit</button> | ||
| </Form> | ||
| ); | ||
| } | ||
|
|
||
| <Example /> | ||
| ``` |
Oops, something went wrong.