How to center a single item (Tailwind CSS)

Everen-John — Sun, 21 Nov 2021 10:53:31 +0000

Need to center an item? Maybe a spinner in the middle of a screen?
Cheat code to Center an item:

<div class="flex justify-center">
<div> whatever you wanna center here.</div>
</div>

UseEffect Chaining?

Everen-John — Thu, 11 Nov 2021 05:49:50 +0000

Just a reminder that if you have many steps to render a page (e.g. multiple useEffects to render data), you can factorize all the steps in a promise.


    const loadPage = async () => {
        return new Promise(async (resolve, reject) => {
            let quizData = await getQuiz()
            let quill = await loadQuill()
            resolve({ quizData, quill })
        })
            .then(async ({ quizData }) => {
                let answerSheet = generateAnswerSheet(quizData)
                return { answerSheet, quizData }
            })
            .then(async ({ answerSheet, quizData }) => {
                setAnswerSheet(answerSheet)
                setQuizData(quizData)
            })
            .then(() => {
                setQuizEnabled(true)
            })
            .catch((e) => {
                window.alert("failed to load:", e)
            })
    }

Adding Quill Modules into ReactQuill in NextJS

Everen-John — Thu, 21 Oct 2021 20:56:44 +0000

I notice that there isn't a clear solution to adding Quill Modules into ReactQuill on NextJS yet. In this example, I am importing blotFormatter into Quill.

The concept here is that since Quill needs document to be defined, we only tell Next to load in Quill and blotFormatter the moment the page is rendered. Since UseEffect only runs the moment the page renders, so we will start our call for these clientside imports there.

We use promise to ensure that Quill is loaded, and blot formatter is loaded, to be resolved so that the Quill.register function will be available to us.

let quillModules = {
    blotFormatter: {
        // see config options below
    },
    toolbar: [
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ["bold", "italic", "underline", "strike", "blockquote"],
        [
            { list: "ordered" },
            { list: "bullet" },
            { indent: "-1" },
            { indent: "+1" },
        ],
        ["link", "image"],
        ["clean"],
    ],
}

let quillFormats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "image",
]

export default function createDocument() {
    const [enableEditor, setEnableEditor] = useState(false)
    const [editorData, setEditorData] = useState("")

    const loadQuill = async () => {
        return new Promise(async (resolve, reject) => {
            const Quill = await require("react-quill").Quill
            const BlotFormatter = (await import("quill-blot-formatter")).default
            resolve({ Quill, BlotFormatter })
        })
            .then(({ Quill, BlotFormatter }) => {
                Quill.register("modules/blotFormatter", BlotFormatter)
                return
            })
            .then((value) => {
                setEnableEditor(true)
            })
    }

    useEffect(async () => {
        await loadQuill()
    }, [])

    return (
            <div className='m-2 text-xs text-white'>
                    {enableEditor ? (
                        <div className='bg-white'>
                            <ReactQuill
                                value={editorData}
                                onChange={setEditorData}
                                modules={quillModules}
                                formats={quillFormats}
                            />
                        </div>
                    ) : null}
            </div>
    )
}

Hopefully this hellps someone who struggles with this same problem as me!

Forem: Everen-John

How to center a single item (Tailwind CSS)

UseEffect Chaining?

Adding Quill Modules into ReactQuill in NextJS