block-content-to-react
Deprecated in favor of @portabletext/react (by sanity-io)
fill-in-the-blank
This is for an article i'm writing. (by ricokahler)
Our great sponsors
block-content-to-react | fill-in-the-blank | |
---|---|---|
2 | 1 | |
161 | 4 | |
- | - | |
0.0 | 0.0 | |
about 1 year ago | about 3 years ago | |
JavaScript | JavaScript | |
MIT License | - |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
block-content-to-react
Posts with mentions or reviews of block-content-to-react.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2022-08-30.
-
Anchor Links From Sanity in Gatsby
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.
-
Make a Progressive Web App with React
// /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;
fill-in-the-blank
Posts with mentions or reviews of fill-in-the-blank.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2021-03-01.
-
Make a Progressive Web App with React
You can see the deployed app at https://fill-in-the-blank.vercel.app/ and see the final code here: https://github.com/ricokahler/fill-in-the-blank
What are some alternatives?
When comparing block-content-to-react and fill-in-the-blank you can also consider the following projects:
React-Commenting-System - Commenting System built with NextJS and Sanity
pxi - 🧚 pxi (pixie) is a small, fast, and magical command-line data processor similar to jq, mlr, and awk.
portabletext - Portable Text is a JSON based rich text specification for modern content editing platforms.
HULL - 💀 Headless Shopify Starter – powered by Next.js + Sanity.io
sanity - Sanity Studio – Rapidly configure content workspaces powered by structured content