word1:

hello

word2

world
Unstyled render

Why 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>
  );
NpmHello.tsx

Import and usage

import { NpmHello } from '@anthood/npm-hello'
 
<NpmHello word1="hello" word2="world" />