Initial value of output

[justinhj]

Hi, I've tried a couple of things but can't seem to get it to do what I want. Is there a way to specify an initial output value?

For example I want the boxes to start off with a '?' in each and the output to be "?????" when the page loads.

Cheers for a great package!

[dannyradden]

In the "inputProps" you can specify a placeholder to pass through. Something like:

<RICIBs
          amount={5}
          autoFocus
          handleOutputString={this.handleOutput}
          inputProps={[
            { className: "first-box" },
            { style: { "color": "orange" } },
            { placeholder: "?" }
          ]}
          inputRegExp={/^[0-9]$/}
        />

with the relevant part being inputProps={[ { placeholder: "?" } ]}

I dont remember off the top of my head right now but you may need to change the regex to include "?" but I dont think so. It's been a while since Ive worked on this package, but plan to update it over the next couple of days.

[justinhj]

The placeholder works but only for the central box. So with the following I have [ ][ ][?][ ][ ] instead of [?][?][?][?][?] and if I set the placeholder to "?????" I get [ ][ ][??????][ ][ ].

It's not a big deal to me as I'm no longer using the project, so feel free to close, or update if you want me to test a new version.

                <div>
                  <RICIBs
                      amount={5}
                      autoFocus
                      handleOutputString={this.handleOutput.bind(this)}
                      inputProps={[
                        { className: "first-box" },
                        { style: { "color": "black" } },
                        { placeholder: "?" },
                      ]}
                      inputRegExp={/^[a-z?]$/}
                    />
                </div>

[dannyradden]

Aw, yes I recently changed the example in the read me to clear up this issue. If you use an array for input props as you have in the example shown, each element in the array will apply to each box individually. Since the placeholder object is the third element in the array it only applies to the third box. In order to apply to all boxes, instead of using an array, just use an object. For example

<div>
                  <RICIBs
                      amount={5}
                      autoFocus
                      handleOutputString={this.handleOutput.bind(this)}
                      inputProps={
                        { className: "input-box" ,
                         style: { "color": "blue"} ,
                         placeholder: "?"
                      }
                      inputRegExp={/^[a-z?]$/}
                    />
                </div>

In this example each box will have the class name "input-box" applied to it, a text color of blue and will each have a placeholder of '?'.

Sorry for the confusion! I realize that it isn't good practice for a variable to be allowed to be different types, I should probably add different props, one for applying to all the boxes, and one for applying to individual boxes.