react-custom-component

Components

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

ScrollBar

Props	Type	Description
width	{string}	Width of the progress bar
children	{node}	Primary content

Slider

Props	Type	Description
isOpen	{bool}	Controls whether or not the slider is displayed
width	{string}	Width of the slider
postion	{string}	Postion of the slider Enums: left, right
style	{object}	Custom styles
children	{node}	Primary content

FacncyButton, FacncyButtonGroup

Props	Type	Description
onClick	{func}	Called after user's click
style	{object}	Custom styles
children	{node}	Primary content

Modal

Props	Type	Description
isOpen	{bool}	Controls whether or not the Modal is displayed
onClose	{func}	Called when a close event happens
style	{object}	Custom styles
children	{node}	Primary content

Modal.Header, Modal.Content, Modal.Actions

Props	Type	Description
style	{object}	Custom styles
children	{node}	Primary content

Loader

Props	Type	Description
type	{string}	Loading style Enums: rolling, spinning
style	{object}	Custom styles

Dropdown

Props	Type	Description
multiple	{bool}	A selection dropdown can allow multiple selections
placeholder	{string}	A hint that describes the expected value of the field
options	{arrayOf}	Array of dropdown option props e.g. { key: '', text: '' }
value	{arrayOf}	Current value array
onChange	{func}	Called when the user attempts to change the value onChange(data: array)
style	{object}	Custom styles

Popup

Props	Type	Description
content	{node}	Element to be rendered for the popover
trigger	{node}	Element to be rendered in-place where the popup is defined
style	{object}	Custom styles

FancyText

Props	Type	Description
type	{string}	Effect style Enums: glitch, shaking
text	{string}	Text
style	{object}	Custom styles

ProgressiveImg

Props	Type	Description
src	{string}	Actual image
placeholderSrc	{string}	Temporary image
width	{string}	Width of image
height	{string}	Height of image

---

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' }}
/>