Custom React Hook Not Working With Rollup - reactjs

Question

I've created a Typescript React component library and using Rollup to bundle and then publish to npm. Now everything works great in storybook but when I pull the package into another project it just doesn't work. No errors, nothing just the hook doesn't fire.
Here is my rollup.config.js
import commonjs from "#rollup/plugin-commonjs";
import copy from "rollup-plugin-copy";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import resolve from "#rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
const packageJson = require("./package.json");
export default {
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
external: ['react', 'react-dom'],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({ useTsconfigDeclarationDir: true }),
postcss(),
copy({
targets: [
{
src: "src/styles/variables.scss",
dest: "build",
rename: "variables.scss"
},
{
src: "src/styles/typography.scss",
dest: "build",
rename: "typography.scss"
}
]
})
]
};
and here is my hook useResize:
import { useEffect, useState } from 'react';
import styles from '../styles/variables.scss';
export const useResize = (ref) => {
const [size, updateSize] = useState({});
const [sizeIndex, updatesizeIndex] = useState(null);
const xsMax = parseInt(styles.xsMax)
const smMax = parseInt(styles.smMax)
const mdMax = parseInt(styles.mdMax)
const lgMax = parseInt(styles.lgMax)
const xlMax = parseInt(styles.xlMax)
const getDimensions = () => ({
width: ref.current.offsetWidth,
height: ref.current.offsetHeight
});
const setSize = () => {
let dimensions = getDimensions();
if (dimensions.width > xlMax) {
updateSize('xxl');
updatesizeIndex(5);
}
if ((dimensions.width <= xlMax) && (dimensions.width > lgMax)) {
updateSize('xl');
updatesizeIndex(4);
}
if ((dimensions.width <= lgMax) && (dimensions.width > mdMax)) {
updateSize('lg');
updatesizeIndex(3);
}
if ((dimensions.width <= mdMax) && (dimensions.width > smMax)) {
updateSize('md');
updatesizeIndex(2);
}
if ((dimensions.width <= smMax) && (dimensions.width > xsMax)) {
updateSize('sm');
updatesizeIndex(1);
}
if (dimensions.width <= xsMax) {
updateSize('xs');
updatesizeIndex(0);
}
}
useEffect(() => {
const handleResize = () => {
setSize();
}
if (ref.current) {
setSize();
}
window.addEventListener('resize', handleResize)
return () => {
window.removeEventListener('resize', handleResize)
}
}, [ref])
return [size, sizeIndex]
}
And here is how its used:
import "./Row.scss";
import React, { FC, useCallback, useEffect, useRef, useState } from "react";
import { RowProps } from "./Row.types";
import _ from 'lodash';
import clsx from "clsx";
import { useResize } from "./useResize";
const Row: FC<RowProps> = ({ gutter, columns, children, title, subTitle }: RowProps) => {
const rowRef = useRef(null);
const [columnsRef, updateColumnsRef] = useState(columns);
const [size, sizeIndex] = useResize(rowRef);
useEffect(() => {
if (_.isNumber(columns))
return;
!columns[sizeIndex] ?
updateColumnsRef(_.last(columns)) :
updateColumnsRef(columns[sizeIndex]);
console.log(size)
}, [size, sizeIndex]);
const renderStyles = useCallback(() => {
return {
display: 'grid',
gridTemplateColumns: `repeat(${columnsRef}, minmax(0, 1fr))`,
gridGap: gutter,
}
}, [columnsRef])
return <div className={clsx("Row")} ref={rowRef}>
{title &&
<div className="Row-heading">
<h4>{title}</h4>
<h5>{subTitle}</h5>
</div>
}
<div className="Row-container" style={renderStyles()}>
{children}
</div>
</div>
};
Row.defaultProps = {
columns: 12,
gutter: 24
}
export default Row;