toobored

TooBored Keyboard - (/to͞o/ bôrd/)

A simple customizable keyboard input for ReactJS

Update: brand new actions API. More customizable than ever.

Props

1. value String - This is the string that the keyboard is to manipulate. required
2. visible Boolean - default is set to false required
3. layout Array - this is an array of objects. if you dont specify them the default QWERTY layout will be displayed optional
4. actions Array - this lets you override the default action buttons. with your own using an array.
5. handleLayoutToggle Function - required only when visible
6. handleKeyboardVisiblity Function - required only when visible
7. handleSubmit Function - required only when visible
8. handleChange Function - required only when visible
9. handleClear Function - required only when visible
10. theme Object - optional

layout prop example

[
        {
          name: "default",
          keys: [
            // row 1
            ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
            // row 2
            ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
            // row 3
            ["z", "x", "c", "v", "b", "n", "m"]
          ]
        },
        {
          name: "caps",
          keys: [
            // row 1
            ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
            // ROW 2
            ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
            // ROW 3
            ["Z", "X", "C", "V", "B", "N", "M"]
          ]
        }...
]

actions prop example

[
  {
    type: "toggleKeyboard",
    text: "Hide"
  },
  {
    type: "spaceKey",
    text: "Space"
  },
  {
    type: "deleteKey",
    text: "<="
  },
  {
    type: "submitKey",
    text: "Send"
  }
]

All actions available types

1. toggleKeyboard - this button type is wired to use your handleKeyboardVisiblity function passed down as a prop.
2. toggleLayout - this button type is wired to use your handleLayoutToggle function passed down as a prop.
3. spaceKey - this button type acts just like the regular keys keys and simply adds a space to your input.
4. deleteKey - this button type is wired to use your handleSubmit function passed down as a prop.
5. submitKey - this button type is wired to use your handleSubmit function passed down as a prop.
6. clearKey- this button type is wired to use your handleClear function passed down as a prop.

theme prop example

{
  keyboardBackground: 'orange',
  keyBackground: 'blue',
  keyBackgroundHover: 'red',
  keyColor: 'papayawhip',
  keyColorHover: 'pink'
}

Example

import React, { Component } from "react";
import TooBored from "toobored";

export default class TooBoredExample extends Component {
  constructor() {
    super();
    this.state = {
      value: ""
    };
  }
  handleKeyboardSubmit = () => {
    alert(`Submiting: ${this.state.value}`);
  };
  handleClearValue = () => {
    this.setState({
      value: ""
    });
  };
  handleChangeValue = value => {
    this.setState({
      value
    });
  };
  toggleKeyboardVisibility = () => {
    this.setState({
      toggleKeyboardVisibility: !this.state.toggleKeyboardVisibility
    });
  };
  showKeyboard = () => {
    this.setState({
      toggleKeyboardVisibility: true
    });
  };
  render() {
    return (
      <div>
        <input
          value={this.state.value}
          placeholder={"Click me to open keyboard"}
          onClick={this.showKeyboard}
          onChange={e => this.handleChangeValue(e.target.value)}
        />
        <TooBored
          value={this.state.value}
          // components state
          visible={this.state.toggleKeyboardVisibility}
          // handlers
          handleKeyboardVisiblity={this.toggleKeyboardVisibility}
          handleSubmit={this.handleKeyboardSubmit}
          handleChange={this.handleChangeValue}
          handleClear={this.handleClearValue}
          actions={[
            {
              type: "toggleKeyboard",
              text: "Toggle"
            },
            {
              type: "spaceKey",
              text: "Space"
            },
            {
              type: "deleteKey",
              text: "Delete"
            },
            {
              type: "submitKey",
              text: "Submit"
            },
            {
              type: "clearKey",
              text: "Clear"
            }
          ]}
        />
      </div>
    );
  }
}