Multi-lingual React Form Component
Demo of re-usable React component with multi-lingual form.
Browse to https://lsiden.github.io/react-component-multi-lingual-form-demo/ to see a live demo.
This demo is derived from an actual project I am working on.
The page presents a simple form with several fields with validation logic, and outside the form, a separate selector to select one of several available languages. When the user selects a different language, it re-renders the embedded form to show labels and error message in the selected language.
Encapsulated connection to Redux store
It connects the component to a Redux store via the react-redux library. It encapsulates this connection in a way that isolates it from any app that uses this component.
The component can do this because it will not share any state with the app that uses it. It's only interface to its context is through its properties.
See [Wiki pages] for info about features of this demo and some problems I had to solve.
- Download or clone this repository to a new project directory.
- In the new project directory, run "yarn install".
- Type "yarn test" to run a single test.
- Type "yarn test:watch" for continuous integration.
- Type "yarn start" and open http://localhost:8080 in your browser.
- Type "yarn build" to build a dist/bundle.js that can be imported into other apps to re-use the form after you have customized it for your own needs.
- Type "yarn build:demo" to create dist/bundle.demo.js as a standalone demo, as I have. I used the very cool RawGit to import it into my page.
To see log messages in the console testing or in the browser devtools console, prepend "DEBUG=demo-form-component:*" to each of the above "yarn" commands. You can replace the asterix a full name to see the debug output for only one module. See the visionmedia/debug README for usage details and suggestions.
Westside Consulting LLC
Ann Arbor, MI
Lawrence Siden, 2017