import React, { useEffect, useRef, useState } from 'react';
import styles from './styles.module.scss';

const RowItem = () => {
  const ref = useRef(null);
  const [size, setSize] = useState('');
  const resize = () => setSize(ref.current ? ref.current.offsetWidth : 0);
  useEffect(() => {
    setSize(ref.current ? ref.current.offsetWidth : 0);
    window.addEventListener('resize', resize);
    return () => window.removeEventListener('resize', resize);
  });
  return (
    <div ref={ref} className={styles.rowItem}>{`${size}px`}</div>
  );
};

RowItem.propTypes = {};

RowItem.defaultProps = {};

export default RowItem;