README
driddle
The original target is level-up front-end skills, and a collection of awesome and useful web-components!
Pricinple
This repo is not a ui-framework like antd
or material
, there is not a desigin system in it. Basic web-elements and Pro web-components will mixed in driddle.
- 📝 easy to modify - like modify style and components
- 📦 easy to use - based on styled-components, not more loaders in project
- 💅 will overwrite but no addtional styles - try not to add extra styles
Install
npm install driddle --save
Usage
use with babel-plugin-import
, config in .babelrc
module.exports = {
...,
plugins: [
[
'import',
{
libraryName: 'driddle',
},
],
]
}
Movie Tickets
<Ticket
style={{ width: '335px', filter: 'drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15))' }}
poster="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=48389a62913df8dcb23087c3ac7819ee/7a899e510fb30f247a507896c695d143ac4b0358.jpg"
>
<Ticket.Meta
title="Wonder Women"
description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
/>
<Ticket.Location value="Lorem ipsum dolor sit amet consectetur adipisicing elit." />
<Ticket.Info
value={[
{
title: 'Salon',
description: '03',
},
{
title: 'Row',
description: '05',
},
{
title: 'Seat',
description: '03-05',
},
]}
/>
<Ticket.Code value="303" type="bar" />
</Ticket>
Shake-it
shake the phone and popup it
<ShakeIt>
<div
style={{
height: '400px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
content
</div>
</ShakeIt>
Moon
the moon processing
<Moon />
FlipNumber
the flip-number animation
const [cnt, setCnt] = useState(0)
return (
<FlipNumber value={cnt} onClick={() => setCnt(prev => prev + 1)} />
)
ProcessNumber
without hooks
const [value, setValue] = useState(0)
useEffect(() => {
setTimeout(() => {
setValue(1)
}, 1000)
}, [])
return (
<ProcessNumber
value={value}
style={{ fontSize: '48px', color: 'white', marginRight: '16px' }}
/>
)
with hooks
const [value, setValue] = useState(0)
const { processNumber, start } = ProcessNumber.useProcessNumber({
value,
})
useEffect(() => {
start()
setTimeout(() => {
setValue(1)
}, 1000)
}, [])
return (
<ProcessNumber.C style={{ fontSize: '48px', color: 'white' }}>
{processNumber}
</ProcessNumber.C>
)
Author
👤 JW
- Twitter: @jiangweixian
- Github: @JiangWeixian
Refs
Show your support
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2019 JW.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator