Adds rows to your forms automagically ✨

Install

$ npm install --save magic-rows

Or download the minified version.

No dependencies.

Features

• ➡ Row appending automation — adds a row only when the two previous are filled
• ⛔ Maximum rows restriction — enables only a certain number of rows
• 🎩 Pattern detection — learns from your patterns to follow your style
• 📖 Pattern declaration — understands your rules to match better

Usage

Insert the script at the end of the body:

<script src="node_modules/magic-rows/dist/magic-rows.min.js"></script>

Add data-action="magic-rows" to your form:

<form data-action="magic-rows">
  <input type="text" id="player-1" placeholder="Player 1">

  <button>Play</button>
</form>

That's it!

Options

You can change all the settings by adding the following data attributes to your form.

Attributes	Type	Default	Example	Description
data-max-rows	integer	6	3	Maximum number of rows
data-format-id	string	""	player-$	Pattern to be applied to ids
data-format-name	string	""	player_$$	Pattern to be applied to names
data-format-placeholder	string	""	Player @	Pattern to be applied to placeholders

Values declaration

• $ will be interpreted as a number
• $$ will be interpreted as a 2-digit number (01)
• $$$ will be interpreted as a 3-digit number (001)
• ...
• @ will be interpreted as a letter

Examples

Pattern detection

<form data-action="magic-rows" data-max-rows="3">
  <input type="text" id="player-3" placeholder="Player 03">

  <button>Play</button>
</form>

Will generate:

<input type="text" id="player-3" placeholder="Player 03">
<input type="text" id="player-4" placeholder="Player 04">
<input type="text" id="player-5" placeholder="Player 05">

Pattern declaration

<form
  data-action="magic-rows"
  data-max-rows="4"
  data-format-id="email-$"
  data-format-name="email-@"
  data-format-placeholder="Friend's #$ email"
>
  <input type="email" id="email-1" name="email-A" placeholder="Enter your friends' email">

  <button>Send</button>
</form>

Will generate:

<input type="email" id="email-1" name="email-A" placeholder="Enter your friends' email">
<input type="email" id="email-2" name="email-B" placeholder="Friend's #2 email">
<input type="email" id="email-3" name="email-C" placeholder="Friend's #3 email">
<input type="email" id="email-4" name="email-D" placeholder="Friend's #4 email">

Demo

See the demo folder.

License

MIT © François Chalifour