word1:
helloword2
worldWhy export to NPM?
Might not make much sense within a single project, but as I reuse UX basics parts across projects, I want to be able to decouple them into packages themselves.
The challenge then is how do we style them independently?
The very basic component
function NpmHello({ word1, word2 }: { word1: string; word2: string }) {
const [count, setCount] = useState(0);
return (
<div>
<h2>word1:</h2>
<span>{word1}</span>
<h2>word2:</h2>
<span>{word2}</span>
<hr />
<button type="button" onClick={() => setCount((prevCount) => prevCount + 1)}>
Count is: {count}
</button>
</div>
);
Import and usage
import { NpmHello } from '@anthood/npm-hello'
<NpmHello word1="hello" word2="world" />