block-content-to-react
Deprecated in favor of @portabletext/react (by sanity-io)
React-Commenting-System
Commenting System built with NextJS and Sanity (by PandaSekh)
Our great sponsors
block-content-to-react | React-Commenting-System | |
---|---|---|
2 | 4 | |
161 | 31 | |
- | - | |
0.0 | 0.0 | |
about 1 year ago | 10 months 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;
React-Commenting-System
Posts with mentions or reviews of React-Commenting-System.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2021-02-17.
-
Emoji Reactions for Comments - Building a Real-Time Commenting System in React [Part 3/3]
Before continuing I feel the need to explain the difference between these two components, because there might be some confusion on why I had to pass and call two different callbacks both for the onClick event. The difference is quite simple. As you saw in the screenshot in the beginning of the article, there will be a box with "unselected" emojis, and a row of selected emojis with a counter on them (see the demo if this isn't clear). So, we'll use the Emoji component for the unselected emojis. Its callback will create a new object in the database and start its counter at 1. Also, it will remove the emoji from the unselected box and move it to the row of selected ones. EmojiWithCounter is the component used to render the selected emojis.
-
Building a Real-Time Commenting System in React [Part 1/3]
One of my latest projects is an entire blog built with Next.js, a framework based on React. One of the features I wanted was a commenting system, but none of those already available were interesting for me and I wanted full control on the features and the data. Because of that, I decided to create my own commenting system. This article is meant to show the process of creating it and there’s a repo on GitHub with the full code for reference.
- Real-Time React Commenting System - With features like emoticon reactions and nesting
What are some alternatives?
When comparing block-content-to-react and React-Commenting-System you can also consider the following projects:
fill-in-the-blank - This is for an article i'm writing.
HULL - 💀 Headless Shopify Starter – powered by Next.js + Sanity.io
pxi - 🧚 pxi (pixie) is a small, fast, and magical command-line data processor similar to jq, mlr, and awk.
Blitz - ⚡️ The Missing Fullstack Toolkit for Next.js
portabletext - Portable Text is a JSON based rich text specification for modern content editing platforms.
twitter-web3 - A decentralized version of twitter.
paws - Every web developer should understand how to create an ECommerce website with React.
sanity - Sanity Studio – Rapidly configure content workspaces powered by structured content
block-content-to-react vs fill-in-the-blank
React-Commenting-System vs HULL
block-content-to-react vs pxi
React-Commenting-System vs Blitz
block-content-to-react vs portabletext
React-Commenting-System vs twitter-web3
block-content-to-react vs HULL
React-Commenting-System vs paws
block-content-to-react vs sanity