redux-form-ui
This is just on an early stage
What is on it?
Make your own UI with redux-form and react-native
-
A clean way to set style to your components with redux-form
-
Use
redux-form
transparently to instance layout components and set your owntheme
through the context efficiently. -
Use
getRenderedComponent()
to return reference to the UI component that has been rendered. This is useful for calling instance methods on the UI components. For example, if you wanted to focus any given field
A set of best practices included:
-
Use
errorMessage
to display a message when it is due. -
Use a generic
ruleRunner
to eval some defaultrules
included or your own ones.
Table of Contents
installation
npm install --save redux-form-ui
.
Usage
;;;;; const YourDefaultTheme = TextInput: borderColor: "red" ErrorText: color: "red" ;PureComponent { return <ThemeProvider Theme=YourDefaultTheme> <MyFieldWrapped /> </ThemeProvider> ; } const MyTextField = ; { return <Field name="name" component=MyTextField hintText="Name" floatingLabelText="Name" placeholder="Name" autoCapitalize="none" autoCorrect=false /> ; } const SimpleInputTextField = { const theme errorText onChange onBlur onFocus value = props; // Injected theme to props return <View> <TextInput style=themeTextInput underlineColorAndroid="transparent" onChangeText=onChange onBlur=onBlur onFocus=onFocus value=value /> !!errorText && <Text theme=themeErrorText>errorText</Text> </View> ;};// Use reduxForm transparently form: "example" initialValues: name: "Jane Doe" runnerMyForm;
Theme
Behind scenes it uses react-broadcast
to emit a context change notification.
Themes
uses React's context feature to provide available to children
regardless of how deep they are in the tree of Component.
<ThemeProvider Theme>
makes Theme
available from context.Theme
to children of the Provider via
props
using withTheme()
HOC as in react-router.
While this is powerful it also can be abused and make it hard to manage.
Rules
A set of most used business rules using ruleRunner
with default validation
rules
Available Rules
- Required
- MatchRegex
- MinLength
- MaxLength
- ...
Normalization
Available Rules
- toUpper
- toLower
- toPhone
- ...
Thanks!
@erikas for inspiring this API with the awesome redux-form
Some Examples
https://github.com/agrcrobles/redux-form-styled-for-react-native