useAllKeysPress Master Demo

This file is the configuration guide in creating the useAllKeysPress demos, these examples are:

1. Single key

2. Key on focused element

3. Multiple keys

4. Multiple keys in order

NOTE: The below code samples are purely for reference. You can use whatever letters you wish.

---

1. Single key

Keys setup

  const avoPress = useAllKeysPress({ userKeys: "a" });
  const waterPress = useAllKeysPress({ userKeys: "w" });
  const duckPress = useAllKeysPress({ userKeys: "d" });
  const foxPress = useAllKeysPress({ userKeys: "f" });

Inputs

  const inputs = [
    { input: avoPress, key: "a", symbol: "🥑" },
    { input: waterPress, key: "w", symbol: "🤽" },
    { input: duckPress, key: "d", symbol: "🦆" },
    { input: foxPress, key: "f", symbol: "🦊" }
  ];

status

// Aids in the detection of the first key pressed in.
 const anyKeyPressed = inputs.some((item) => item.input === true);

Title component

 <Title
   heading={"Single key usage"} 
   subtext={"Press the key and see."}
 />

UseAllKeypad component

 <UseAllKeypad 
  inputs={inputs} 
 />

Screen component

 <Screen
  activate={anyKeyPressed}
  input={inputs}
 ></Screen>

UserOutput component

  <UserOutput 
  items={inputs} 
  />

---

2. Key on focused element

Keys setup

  // create a ref to attach to the element that will have focus.
  const input = useRef(null)
  
  const upPress = useAllKeysPress({ userKeys: "ArrowUp", ref: input });
  const downPress = useAllKeysPress({ userKeys: "ArrowDown", ref: input });

Inputs

  const inputs = [
    { input: upPress, key: "ArrowUp", symbol: "🤗" },
    { input: downPress, key: "ArrowDown", symbol: "🤮" }
  ];

status

// Aids in the detection of the first key pressed in.
 const anyKeyPressed = inputs.some((item) => item.input === true);

Title component

 <Title
   heading={"Key on Focused Element"} 
   subtext={"Press the key and see."}
 />

UseAllKeypad component

 <UseAllKeypad 
  inputs={inputs} 
 />

Screen component

 <Screen
  activate={anyKeyPressed}
  input={inputs}
 >
   // element to be referenced on focus.
   <UseAllInput ref={input} />
 </Screen>

UserOutput component

  <UserOutput 
  items={inputs} 
  />

---

3. Multiple keys

Keys setup

  const avoPress = useAllKeysPress({ userKeys: "a" });
  const waterPress = useAllKeysPress({ userKeys: "w" });
  const duckPress = useAllKeysPress({ userKeys: "d" });
  const foxPress = useAllKeysPress({ userKeys: "f" });
  
  // this variable represents will when all are pressed
  const combinePress = useAllKeysPress({ userKeys: ["a", "w", "d", "f"] });

Inputs

  const inputs = [
    { input: avoPress, key: "a", symbol: "🥑" },
    { input: waterPress, key: "w", symbol: "🤽" },
    { input: duckPress, key: "d", symbol: "🦆" },
    { input: foxPress, key: "f", symbol: "🦊" }
  ];

status

// Aids in the detection of the first key pressed in.
 const anyKeyPressed = inputs.some((item) => item.input === true);

Title component

 <Title
   heading={"Multiple keys"} 
   subtext={"Press the keys and see."}
 />

UseAllKeypad component

 <UseAllKeypad 
  inputs={inputs} 
  type={"multi"}
 />

Screen component

 <Screen
  activate={anyKeyPressed}
  input={inputs}
 ></Screen>

UserOutput component

  <UserOutput 
  items={inputs}
  combine={combinePress}
  />

---

4. Multiple keys in order

Keys setup

  const akeyPress = useAllKeysPress({ userKeys: "a" });
  const bkeyPress = useAllKeysPress({ userKeys: "b" });
  const ckeyPress = useAllKeysPress({ userKeys: "c" });
  
  // this variable represents will when all are pressed in order
  const combinePress = useAllKeysPress({ userKeys: ["a", "b", "c"], order: true });

Inputs

 const inputs = [
    { input: akeyPress, key: "a"},
    { input: bkeyPress, key: "b"},
    { input: ckeyPress, key: "c"},
  ];

status

// Aids in the detection of the first key pressed in.
 const anyKeyPressed = inputs.some((item) => item.input === true);

Title component

 <Title
   heading={"Multiple keys in order"} 
   subtext={"Press the keys and see."}
 />

UseAllKeypad component

 <UseAllKeypad 
  inputs={inputs} 
  type={"multi"}
 />

Screen component

 <Screen
  activate={anyKeyPressed}
  input={inputs}
  combine={combinePress}
  type={"jackson"}
  message={"All you gotto do is repeat after me!!"}
 ></Screen>

UserOutput component

  <UserOutput 
  items={inputs}
  combine={combinePress}
  />