React + TypeScript Component Library (tsup)

Starter para publicar um componente React no npm e consumir em outro projeto.

Como usar este template

1. Renomeie o pacote em package.json:

   • Para um pacote público com scope: "name": "@seu-escopo/minha-lib"
     • O primeiro publish precisa de --access public
   • Ou sem scope: "name": "minha-lib"

2. Instale dependências:

   npm install

3. Build:

   npm run build

4. Publicar no npm:

   • Faça login (npm login).
   • Se usar scope público: npm publish --access public
     • Sem scope: npm publish

Dica: mantenha react e react-dom como peerDependencies (já configurado). Isso evita múltiplas cópias do React no projeto consumidor.

Estrutura

.
├─ src/
│  ├─ MyButton.tsx
│  └─ index.ts
├─ package.json
├─ tsconfig.json
├─ tsup.config.ts
├─ .gitignore
└─ .npmignore

• Edite/adicione componentes em src/ e reexporte em src/index.ts.

Consumindo em outro projeto

# em outro app (Vite, Next, CRA, etc.)
npm install minha-lib
# ou
npm install @seu-escopo/minha-lib

// Exemplo de uso
import { MyButton } from 'minha-lib'

export default function Page() {
  return <MyButton onClick={() => alert('olá!')}>Enviar</MyButton>
}

Versionamento

• Atualize version no package.json (ex.: 0.1.1) antes de publicar novamente.
• Ou use npm version patch|minor|major.

Teste local sem publicar (opcional)

• npm pack gera um .tgz local. No app consumidor: npm install ../caminho/minha-lib-0.1.0.tgz.

Dicas de qualidade

• Adicione linters (eslint, prettier).
• Configure CI (GitHub Actions) e release automatizado (semantic-release).
• Exporte CSS opcional com style/files ou mantenha apenas estilos inline/CSS-in-JS.
• Se for SSR/Next.js, prefira exports bem definidos (já incluso).

Feito com ❤️