npm packaging Agnostic Hello-World-Component in React.js that can be imported with its functionality. Building up on this you can try a generator that followed by running npx @anthood/crc my-component
word1: hello word2 world Count is: 0 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" />