This is a simple react component that uses @sanity/block-content-to-react. The great part here is that they have allowed for serializers and you can add a great deal of customization to any of the block based PortableText that you will be receiving from the graphql from Sanity.io.

// /src/MadLib.js import { useQuery } from 'react-query'; import { useParams, Link } from 'react-router-dom'; import { useState, useEffect } from 'react'; import BlockContent from '@sanity/block-content-to-react'; import { sanity, imageUrlBuilder } from './sanity'; import styles from './MadLib.module.css'; const query = ` *[ _type == 'madLib' && slug.current == $slug ] `; function MadLib() { // this variable is populated from `react-router` which pulls it from the URL const { slug } = useParams(); // data is fetched from sanity via the sanity client and stored into // application state via react-query. note that the slug is used as the // "query key": https://react-query.tanstack.com/guides/query-keys const { data = [] } = useQuery(slug, () => sanity.fetch(query, { slug })); // we'll use destructuring assignment to return the first mab lib const [madLib] = data; // this will store the state of the answers of this mad lib const [answers, setAnswers] = useState( // if the items exist in localStorage, then localStorage.getItem(slug) ? // then set the initial state to that value JSON.parse(localStorage.getItem(slug)) : // otherwise, set the initial state to an empty object {}, ); // this is a react "effect" hook: https://reactjs.org/docs/hooks-effect.html // we use this to watch for changes in the `slug` or `answers` variables and // update local storage when those change. useEffect(() => { localStorage.setItem(slug, JSON.stringify(answers)); }, [slug, answers]); if (!madLib) { return

Loading…h1>; } // once the mad lib is loaded, we can map through the structured content to // find our placeholder shape. the end result is an array of these placeholders const placeholders = madLib?.story .map((block) => block.children.filter((n) => n._type === 'placeholder')) .flat(); // using the above placeholders array, we calculate whether or not all the // blanks are filled in by checking the whether every placeholder has a value // in the `answers` state variable. const allBlanksFilledIn = placeholders?.every( (placeholder) => answers[placeholder._key], ); return ( <>

{madLib.title}h2> {!allBlanksFilledIn ? ( // if all the blanks are _not_ filled in, then we can show the form <>

Fill in the blank!p>

When you're done, the finished mad lib will appear.p>

{ e.preventDefault(); const answerEntries = Array.from( // find all the inputs e.currentTarget.querySelectorAll('input'), ) // then get the name and values in a tuple .map((inputEl) => [inputEl.name, inputEl.value]); // use `Object.fromEntries` to transform them back to an object const nextAnswers = Object.fromEntries(answerEntries); setAnswers(nextAnswers); }} >

{/* for each placeholder… */} {placeholders.map(({ _key, type }) => (
• {/* …render an input an a label. */} {type} label> li> ))} ul> Submit!button> form> ) : ( // if all the blanks are filled in, then we can show the rendered // story with a custom serializer for the type `placeholder` <> answers[_key] }, }} /> { // we reset the state on click after the users confirms it's okay. if (window.confirm('Are you sure you want to reset?')) { setAnswers({}); } }} > Reset button> {/* this is a simple link back to the main mab libs index */} ← More Mad Libs Link> )} ); } export default MadLib;

Very interesting piece of software :). I have put a lot of work in pxi, a very similar tool written in pure JavaScript. I am not here to start a flame war between Python and JavaScript btw., I am actually thrilled to find another person that has written a very similar project :).

I have been working on a command-line parser for one of my open source projects (pxi) for about 5 months now. Today I have reached a milestone and wanted to collect feedback before I move on:

Hey, good job! If you wrote this to get a task done, you may also want to have a look at pxi (disclosure, I am the author).