Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Invoking a node module from react component

How do I use Node Modules for example 'lwip' in React component ? This is for an electron application.

Updating the question with Code:

  1. This is the react component from which I am trying to invoke another .js file.

button.js

import React from 'react';
import ReactDOM from 'react-dom';
import resize from '../../node-code/process';

class Button extends React.Component{

    mess(){
        console.log('working');
        resize();
    }

    render(){
        return <button id="imgButton" onClick={this.mess.bind(this)}>Upload Image</button>
    }
}

export default Button
  1. This is the other javascript file where I am trying to resize the image.

process.js

var lwip = require('lwip');

export default function(){
    var lwip = require('lwip');
    lwip.open('../../public/img/portrait.jpg', function(err, image){


    image.batch()
        .scale(0.75)          // scale to 75%
        .rotate(45, 'white')  // rotate 45degs clockwise (white fill)
        .crop(200, 200)       // crop a 200X200 square from center
        .blur(5)              // Gaussian blur with SD=5
        .writeFile('../../public/img/output.jpg', function(err){

        });

    });
}
like image 863
Vasista Avatar asked Dec 15 '16 20:12

Vasista


People also ask

How do you call a node js function from React?

export default App; Now run the Nodejs process npm run dev in one terminal and in another terminal start Reactjs using npm start simultaneously. Output: We see react output we see a button “Connect” we have to click it. Now when we see the console server-side we see that the ReactJS is connected with NodeJS.

How do I run a node module?

The usual way to run a Node. js program is to run the globally available node command (once you install Node. js) and pass the name of the file you want to execute. While running the command, make sure you are in the same directory which contains the app.

Can you use node packages in React?

For example, you can host your React application on Ruby on Rails and use Node to build assets for the Rails Asset Pipeline. The Webpack Node package makes it very easy to bundle your multi-file React application into a single file for production and compile JSX (with Babel) during that process.


1 Answers

The Node module needs to be run from the main Electron thread, not the renderer thread on which React runs.

You can run NPM modules in the renderer process, as if you were in the browser, but those modules cannot use the Node.js library since obviously there is no Node in the browser.

To communicate between the main (Node) and renderer (browser) threads you need to use IPC (inter process communication) a system which uses events to send data between threads.

Here's the IPC documentation for Electron.

If you need constant communication between threads you can use the electron-ipc-socket library.

like image 97
Pier Avatar answered Oct 02 '22 23:10

Pier