block-content-to-react
HULL
Our great sponsors
block-content-to-react | HULL | |
---|---|---|
2 | 5 | |
161 | 1,337 | |
- | - | |
0.0 | 0.0 | |
about 1 year ago | 6 months ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
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
-
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;
HULL
-
How to start freelancing?
Usually freelancing need portfolios. I'd suggest building a sample project that uses this https://github.com/ndimatteo/HULL since it's really easy to extend if customers ask for more
- What is the point of learning to build e-commerce websites when platforms like Shopify exist?
-
Awesome Shopify Resources for 2022
6. HULL
-
eCommerce website, build by Nextjs, Sanityio and shopify
Hey, this is the template that I am using. https://github.com/ndimatteo/HULL I think Sanityio has some template that is with Nuxtjs. You can take a look.
-
What is the proper way to pull data in a Next x Contentful x Shopify build?
Check out Hull, very similar except using Sanity: https://github.com/ndimatteo/hull
What are some alternatives?
fill-in-the-blank - This is for an article i'm writing.
next-shopify-starter - Nextjs + Tailwind CSS + Shopify Starter
React-Commenting-System - Commenting System built with NextJS and Sanity
shopify-next.js-tailwind - Learn the Shopify + Next.js + Tailwind CSS Stack! SWR, Hydrogen, + more
pxi - 🧚 pxi (pixie) is a small, fast, and magical command-line data processor similar to jq, mlr, and awk.
leerob.io - ✨ My portfolio built with Next.js, Tailwind, and Vercel.
portabletext - Portable Text is a JSON based rich text specification for modern content editing platforms.
nextjs-multiple-domains - Example using SSR to handle multiple domains on the same project.
sanity - Sanity Studio – Rapidly configure content workspaces powered by structured content
nextly-template - Nextly Landing Page Template built with Next.js & TailwindCSS
nextjs-vercel-edge-ab-test-example - A simple homepage A/B test using nextjs, vercel edge functions and amplitude
server-components-notes-demo - Experimental demo of React Server Components with Next.js. Deployed serverlessly on Vercel.