ajcrites

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { ColorToolContext } from '~/ColorToolAppContext';
+
+export const HexInput = () => {
+  const { hex, setHex, setRgba } = useContext(ColorToolContext);

-export const HexInput = ({ hex, setHex, setRgba }) => {
   const onChange = ({ target: { value } }) => {

ajcrites

import React, { useState, createContext } from 'react';

import { HexInput } from '~/HexInput';
import { RgbaInput } from '~/RgbaInput';

interface ColorContextProps {
  hex: string;
  rgba: number[];

  setHex: (value) => void;

ajcrites

@@ -9,8 +9,8 @@ export const ColorToolApp = () => {

   return (
     <main>
-      <HexInput hex={hex} setHex={setHex} />
-      <RgbaInput rgba={rgba} setRgba={setRgba} />
+      <HexInput hex={hex} setHex={setHex} setRgba={setRgba} />
+      <RgbaInput rgba={rgba} setRgba={setRgba} setHex={setHex} />
     </main>
   );

ajcrites

@@ -1,20 +1,19 @@
-import React from 'react';
+import React, { useRef } from 'react';

 export const RgbaInput = ({ rgba, setRgba }) => {
-  const onChange = idx => ({ target: { value } }) => {
-    const newRgba = [...rgba];
-    newRgba[idx] = value;
+  const inputs = [useRef(null), useRef(null), useRef(null), useRef(null)];
+  const onChange = () => {

ajcrites

import React from 'react';

export const HexInput = ({ hex, setHex }) => {
  const onChange = ({ target: { value } }) => {
    setHex(value);
  };

  return (
    <label>
      Hex:

ajcrites

import React, { useState } from 'react';

import { HexInput } from '~/HexInput';
import { RgbaInput } from '~/RgbaInput';

export const ColorToolApp = () => {
  const [hex, setHex] = useState('');
  const [rgba, setRgba] = useState([0, 0, 0, 0]);
  
  return (

ajcrites

import React from 'react';

export const HexInput = () => (
  <label>
    Hex:
    <input />
  </label>
);

ajcrites

# this also works in vim
rename 's/-(\w)/\U$1/g' $FILES

ajcrites

export const TimesTableApp = () => {
  const [pointCount, setPointCount] = useState(10);
  const [timesTable, setTimesTable] = useState(2);
  const [lineColor, setLineColor] = useState('#000000');

  const state: TimesTableContextProps = {
    pointCount,
    timesTable,
    lineColor,

ajcrites

export const TimesTable = () => {
  const { timesTable, pointCount, lineColor } = useContext(TimesTableContext);
  const props = { timesTable, pointCount, lineColor };

  ...
};