Custom props for sharing styles

We're simply creating a button which you can use to toggle a "loading state" on/off to render a skeleton UI.

import React, { useState } from 'react'
import { Ui } from './Ui'

const App = () => {
    const [loading, setLoading] = useState(false)
    const is = loading ? 'skeleton' : undefined

    return (
        <>
            <Ui.h1 is={is}>Breaking news</Ui.h1>
            <Ui.p is={is}>This is a dummy content for you!</Ui.p>
            <Ui.button onClick={() => setLoading(!loading)}>Toggle</Ui.button>
        </>
    )
}

Try it out#

There is CodeSandbox based demo you can play with. It has slightly more styling/content.