https://github.com/zpg6/esptool-react
React library that provides hooks and context for programming ESP32/ESP8266 devices using esptool-js.
https://github.com/zpg6/esptool-react
esp32 esptool esptool-js nextjs react webserial
Last synced: 2 months ago
JSON representation
React library that provides hooks and context for programming ESP32/ESP8266 devices using esptool-js.
- Host: GitHub
- URL: https://github.com/zpg6/esptool-react
- Owner: zpg6
- License: mit
- Created: 2025-05-13T12:07:32.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-07-03T19:42:51.000Z (3 months ago)
- Last Synced: 2025-08-03T22:46:23.685Z (2 months ago)
- Topics: esp32, esptool, esptool-js, nextjs, react, webserial
- Language: TypeScript
- Homepage: https://esptool-react.com
- Size: 196 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# esptool-react
A React library that provides hooks and context for programming ESP32/ESP8266 devices using esptool-js.
[](https://www.npmjs.com/package/esptool-react)
[](https://www.npmjs.com/package/esptool-react)
[](https://opensource.org/licenses/MIT)
**LIVE DEMO**: [https://esptool-react.com/](https://esptool-react.com/)
Demo implementation is available in the [`examples/nextjs/`](./examples/nextjs/) directory showcasing a complete ESP development console with programming and monitoring capabilities.
## Features
- 🔌 **React Hooks & Context**: Clean API for ESP device communication
- 📱 **Web Serial API Integration**: Direct browser-to-device communication
- 🌐 **Browser Compatibility Detection**: Automatic WebSerial support detection with user guidance
- 🔧 **Firmware Validation**: Built-in validation and guidance utilities
- 📊 **Real-time Progress**: Track flashing progress and device status
- 🎯 **TypeScript Support**: Full type safety and IntelliSense
- 🛠️ **Multi-chip Support**: Works with ESP32, ESP8266, and other ESP variants
- 📁 **File Management**: Handle multiple firmware files with address validation
- 🚀 **Modern React**: Built for React 17+ with hooks-first approach
## Installation
```bash
npm install esptool-react
```
## Usage
```tsx
import { ESPLoaderProvider, useEspLoader } from 'esptool-react';
function App() {
return (
);
}
function ESPProgrammer() {
const { state, actions } = useEspLoader();
const handleConnect = async () => {
await actions.connect();
};
const handleFlash = async () => {
const files = [/* your ESP files */];
await actions.program(files);
};
return (
Status: {state.isConnected ? 'Connected' : 'Disconnected'}
Connect
Flash Firmware
);
}
```
## License
[MIT](./LICENSE)
## Contributing
Contributions are welcome! Whether it's bug fixes, feature additions, or documentation improvements, we appreciate your help in making this project better. For major changes or new features, please open an issue first to discuss what you would like to change.