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.

Last updated on by Victor Vincent