driddle

driddle

Usage no npm install needed!

<script type="module">
  import driddle from 'https://cdn.skypack.dev/driddle';
</script>

README

driddle

Documentation License: MIT version Twitter: jiangweixian

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.

  1. 📝 easy to modify - like modify style and components
  2. 📦 easy to use - based on styled-components, not more loaders in project
  3. 💅 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

docs | live-demo

<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

docs | live-demo

shake the phone and popup it

<ShakeIt>
  <div
    style={{
      height: '400px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    content
  </div>
</ShakeIt>

Moon

docs | live-demo

the moon processing

<Moon />

FlipNumber

docs | live-demo

the flip-number animation

const [cnt, setCnt] = useState(0)
return (
  <FlipNumber value={cnt} onClick={() => setCnt(prev => prev + 1)} />
)

ProcessNumber

docs | live-demo

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>
  )

>>>more useage

Author

👤 JW

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