@evanhongo/react-custom-component v2.3.0

react-custom-component

Components

import {
  ScrollBar,
  FancyButton,
  FancyButtonGroup,
  Slider,
  Modal,
  Loader,
  Popup,
  FancyText,
  ProgressiveImg
} from '@evanhongo/react-custom-component'

ScrollBar

Slider

FacncyButton, FacncyButtonGroup

Modal

Modal.Header, Modal.Content, Modal.Actions

Loader

Dropdown

Popup

FancyText

ProgressiveImg

Demo

Storybook

npm run storybook

• Demo site is hosted at http://localhost:6006

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
  <Modal.Header style={{ fontSize: '30px' }}>Warning!!～</Modal.Header>
  <Modal.Content>
    <p style={{ fontSize: '30px' }}>Are you sure?</p>
  </Modal.Content>
  <Modal.Actions>
    <input
      type="button"
      value="No"
      style={{
        marginRight: '10px',
        width: '100px',
        height: '50px',
        fontSize: '20px',
      }}
      onClick={() => setIsOpen(false)}
    />
    <input
      type="button"
      value="Yes"
      style={{ width: '100px', height: '50px', fontSize: '20px' }}
      onClick={() => setIsOpen(false)}
    />
  </Modal.Actions>
</Modal>

const [selected, setSelected] = useState([])
;<Dropdown
  options={[
    { key: 1, text: '123' },
    { key: 2, text: '234' },
    { key: 3, text: '345' },
    { key: 4, text: 'ABC' },
    { key: 5, text: 'DEF' },
    { key: 6, text: 'GHI' },
  ]}
  value={selected}
  onChange={(key) => {
    setSelected(key)
  }}
/>

<Popup
  trigger={
    <button
      style={{
        fontSize: '30px',
        color: '#df2929',
        cursor: 'pointer',
        userSelect: 'none',
      }}
    >
      Test
    </button>
  }
  content={<div style={{ fontSize: '30px' }}>Hello World</div>}
  style={{ margin: '300px 300px' }}
/>

<FancyText
  as="div"
  type="glitch"
  text="Test123456"
  style={{ fontSize: '70px' }}
/>