@your-scope/react-theme-toggle

Small React component to toggle between light and dark themes.

Install

npm i @your-scope/react-theme-toggle

Usage

import { useState } from "react";
import { ThemeToggle, Theme } from "@your-scope/react-theme-toggle";

export default function App() {
  const [theme, setTheme] = useState<Theme>("light");
  return (
    <div data-theme={theme}>
      <ThemeToggle theme={theme} onToggle={setTheme} />
    </div>
  );
}

13) Add a LICENSE
- Create `LICENSE` (MIT is common). You can copy an MIT template and add your name/year.

14) Build the package
```bash
npm run build

• This should create a dist folder with index.cjs, index.mjs, and index.d.ts.

15. Test locally using npm pack

npm pack

• This creates a .tgz file like your-scope-react-theme-toggle-0.1.0.tgz.

16. Try it in a sample app

• In another test React app:

cd path\to\your\test-app
npm i ..\path\to\react-theme-toggle\your-scope-react-theme-toggle-0.1.0.tgz

• Import the component and ensure it renders and toggles.

17. Prepare to publish

• Double-check:
  • name is available.
  • version is correct.
  • files includes dist, README.md, LICENSE.
  • peerDependencies has React and ReactDOM.
  • No secrets in your repo.

18. Publish to npm

• If scoped and public:

npm publish --access public

• If unscoped:

npm publish

• If you enabled 2FA on npm, enter your OTP.

19. Verify on npm

• Visit your package page (e.g., https://www.npmjs.com/package/@your-scope/react-theme-toggle).
• Try installing via:

npm i @your-scope/react-theme-toggle

20. Update versions later

• For changes:

npm version patch   # or minor/major
npm publish

Common gotchas (read this)

• Keep React in peerDependencies, not dependencies.
• Ensure dist exists before publish (prepublishOnly runs build).
• If “You do not have permission to publish” appears, the name is taken or scope permissions are missing.
• For monorepos with workspaces, add the package path to the root workspaces if you use them (optional).
• If using GitHub, tag versions automatically when running npm version (it creates a git tag).

If you want, I can generate the folder structure and files in your repo and run the build/publish commands for you.