Redux-form with a progress bar

Question

I need some help in figuring out how to add a progress bar to my redux-form to track progress of a password field.

I'm trying to use a component that renders LinearProgress of material-ui, but can't find a good way to pass/access password value.

<Field  ...
        name="password"
        type="password"
        label={PASSWORD}
        component={renderField} />

<LinearProgress
        mode="determinate"
        value={this.state.completed} /> 

this.state.completed should be computed based on the password value.

If there is a standard way to do something like this, I would appreciate a pointer.

Answer 1

Basically you need to

1. access the password value in the redux store, and
2. pass that value to your component to calculate some sort of a complexity score

You should use formValueSelector to retrieve the value inside mapStateToProps and then just pass it on as a prop to your component. Example:

import React, { Component } from 'react'
import { formValueSelector, reduxForm, Field } from 'redux-form'
import { connect } from 'react-redux'

class MyForm extends Component {
  computePasswordComplexityScore() {
    // here you obviously compute whatever score you need
    const score = doSomethingWith(this.props.currentPasswordValue)
    return score
  }

  render() {
    return (
      <Field  ...
        name="password"
        type="password"
        label={PASSWORD}
        component={renderField} />

      <LinearProgress
        mode="determinate"
        value={ this.computePasswordComplexityScore() } />
    )
  }
}

const selector = formValueSelector('MyFormName')

const mapStateToProps = state => {
  const currentPasswordValue = selector('password')
  return { currentPasswordValue }
}

@connect(mapStateToProps)
@reduxForm({ form: 'MyFormName' })
export default class MyFormContainer extends MyForm {}

Hope this helps!