## Introduction We will be making a reusable crossword react component. This will use React, Hooks and tailwind to style and manage the functionality of the crossword. We will step through the challenges of create and managing a component as well as the logic to manage the crossword. ## Requirements - Yarn or NPM - Basic knowledge of React - Basic knowledge of Tailwind CSS ## Creating the environment Firstly create a new create-react app, not the preferred way of starting a new web app, but as we are only using this to create a component, I think we will be okay. ```bash npx create-react-app crossword-component cd crossword-component ``` Next installing tailwindcss for the styling and tailwiind-merge for handling utility classes. ```bash yarn add tailwindcss tailwindcss-merge ``` Now creating the Cell component, we will use this as the individual cells repeated for the crossword. But on top of this we need to add some logic to the cell to allow it to be a "filler" solid block as well as an input. ```jsx export default function Cell({ cell }: Readonly<{ cell: string }>) { return (

{cell === "x" ?

: }

) } ``` We have made the decision here to use the lower case x as a filler cell, we will address this further when building out the crossword component itself. ## Creating the crossword component Now we will create the crossword component this will take an array of arrays or matrices and render the crossword. We will also pass in the across and down clues to be displayed. below the crossword. ```jsx import Cell from './Cell'; export default function RenderCrossword({ matrices, across, down }: { matrices: string[][]; across: WordItem[]; down: WordItem[]; }) { return (

{matrices.map((row, i) =>

{row.map((cell, j) => )}

)}

Across

{across.map((item, i) => { return (

{item.number}.{" "} {item.clue}

) })}

Down

{down.map((item, i) => { return (

{item.number}.{" "} {item.clue}

) })}

); } ``` So we now have the cross word being output correctly, but we need to add some logic to check if the word is correct and to do some extra things like cross out the clue list. Maybe even some sort of animation when all words are completed. ## Logic for the crossword Lets keep an internal state for the crossword, we are generating an empty matrices, so we can store the users input and so we can reference this when checking words are correct. ```jsx export default function RenderCrossword({ matrices, across, down }: { matrices: string[][]; across: WordItem[]; down: WordItem[]; }) { const [completed, setCompleted] = useState(false); const [internalState, setInternalState] = useState(generateMatrix(matrices[0].length, matrices.length)); const [acrossInternalState, setAcrossInternalState] = useState(across?.map((item) => { return {...item, completed: false}; })); const [downInternalState, setDownInternalState] = useState(down.map((item) => { return {...item, completed: false}; })); ... } ``` Now lets use this internal state when rendering the crossword. we will make a handle input function and pass this through to the cell component. ```jsx const handleInput = (e: React.ChangeEvent, x: number, y: number) => { const newState = [...internalState]; newState[x][y] = e.target.value; setInternalState(newState); checkWordsCompleted(newState, acrossInternalState, downInternalState); } ... handleInput(e, i, j)} /> ``` Now we need to add this to the cell component. Lets also pass the x and y coordinates to the cell component. ```jsx export default function Cell({ cell, handleInput, x, y }: Readonly<{ cell: string; handleInput: (e: React.ChangeEvent) => void; x: number; y: number; }) { return (

{cell === "x" ?

: }

) } ``` ## Conclusion We have create a reusable Crossword Component that is completely functional as a crossword. we can pass different clues and matrices to make this work in many different ways. Next steps for this are making the crossword even more interactive. Maybe adding a timer and hooks into external APIs. Further more introducing AI to generate the crossword itself.

Tags