How To Publish React Hooks And Components As NPM Package? A Beginner's Guide #react #rollup #npm

getting error for react component

learned about rollup. Thanks

Hey Tapas,
this is my hook
import React from "react";
import { useRef } from "react";
import { useState } from "react";

const useHalfClicked = () => {
const [halfClicked, setHalfClicked] = useState();
const divRef = useRef();

const handlHalfClicked = (e) => {
const divWidth = divRef.current.getBoundingClientRect().width;
const halfDivWidth = divWidth / 2;
const mouseXPos = e.nativeEvent.offsetX;
const half = mouseXPos <= halfDivWidth;
setHalfClicked(half);
};

const HalfWrapper = ({ children }) => {
return (
<div
style={{ width: "fit-content" }}
ref={divRef}
onClick={handlHalfClicked}
>
{children}
</div>
);
};

return {
halfClicked,
HalfWrapper,
};
};

export default useHalfClicked;
I am getting below error
[!] RollupError: Expression expected
src/hooks/useHalfClicked.js (19:6)
17: const HalfWrapper = ({ children }) => {
18: return (
19: <div
^
20: style={{ width: "fit-content" }}
21: ref={divRef}
at error (E:\react\npmPackages\aakash-hooks\node_modules\rollup\dist\shared\parseAst.js:279:30)
at nodeConverters (E:\react\npmPackages\aakash-hooks\node_modules\rollup\dist\shared\parseAst.js:2147:9)
at convertNode (E:\react\npmPackages\aakash-hooks\node_modules\rollup\dist\shared\parseAst.js:1032:12)
at convertProgram (E:\react\npmPackages\aakash-hooks\node_modules\rollup\dist\shared\parseAst.js:1023:48)
at Object.parseAstAsync (E:\react\npmPackages\aakash-hooks\node_modules\rollup\dist\shared\parseAst.js:2213:20)
at Module.tryParseAsync (E:\react\npmPackages\aakash-hooks\node_modules\rollup\dist\shared\rollup.js:14942:20)
at Module.setSource (E:\react\npmPackages\aakash-hooks\node_modules\rollup\dist\shared\rollup.js:14523:35)
at ModuleLoader.addModuleSource (E:\react\npmPackages\aakash-hooks\node_modules\rollup\dist\shared\rollup.js:18860:13)

Great video

❤❤❤❤❤❤❤❤

ধন্যবাদ,
ভালভাবে বুঝতে পারলাম। ❤

সরাসরি GitHub থেকে publish করার ভিডিও চাই ❤

Why don't you make an actually useful and robust package explaining the architecture, code structure etc? Not like a big one, a medium sized one. That will be really great. Everybody shows the flow, but few shows building the real deal. Please do one.

awesome! really thanks for your dedication. if i want to publish any react component, will it be same proccedure as you have guided here?

Really awesome video and we want next video about rollup. Thank you❤

thank you for this amazing video sir.

Thank you

really helpful video .
Thanks for sharing with us❤❤