How to use @nodegui/react-nodegui - 9 common examples

To help you get started, we’ve selected a few @nodegui/react-nodegui examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github nodegui / react-nodegui-starter / src / index.tsx View on Github external
import { Renderer } from "@nodegui/react-nodegui";
import React from "react";
import App from "./app";

process.title = "My NodeGui App";
Renderer.render(<App />);
// This is for hot reloading (this will be stripped off in production by webpack)
if (module.hot) {
  module.hot.accept(["./app"], function() {
    Renderer.forceUpdate();
  });
}
github nodegui / react-nodegui / examples / weather-app-widget / src / index.tsx View on Github external
} catch (err) {
      console.log(err);
    }
  }, []);

  const summary = weather.weather[0] || {};
  const refreshHandler = useEventHandler(
    {
      [QPushButtonEvents.clicked]: async () => {
        setWeather(defaultState);
        await getWeather();
      }
    },
    []
  );
  const quitHandler = useEventHandler(
    {
      [QPushButtonEvents.clicked]: () => {
        QApplication.instance().quit();
      }
    },
    []
  );

  return (
    <Window id="win" ref={winRef} styleSheet={stylesheet}>
      <View id="container">
        <WeatherIcon icon={summary.icon} id="image" />
        <View id="details">
          <Summary title={summary.main} description={summary.description} />
          <View style={midBox}>
            <TemperatureBox
github nodegui / react-nodegui / examples / weather-app-widget / src / index.tsx View on Github external
initWindow(win);
    }
    getWeather();
  }, []);

  const getWeather = useCallback(async () => {
    try {
      const data = await getCurrentWeather();
      setWeather(data);
    } catch (err) {
      console.log(err);
    }
  }, []);

  const summary = weather.weather[0] || {};
  const refreshHandler = useEventHandler(
    {
      [QPushButtonEvents.clicked]: async () => {
        setWeather(defaultState);
        await getWeather();
      }
    },
    []
  );
  const quitHandler = useEventHandler(
    {
      [QPushButtonEvents.clicked]: () => {
        QApplication.instance().quit();
      }
    },
    []
  );
github nodegui / react-nodegui-starter / src / components / steptwo.tsx View on Github external
export function StepTwo() {
  const btnHandler = useEventHandler<QPushButtonSignals>(
    {
      clicked: () => open("https://react.nodegui.org").catch(console.log)
    },
    []
  );
  return (
    <View style={containerStyle}>
      <Text style={textStyle} wordWrap={true}>
        {`
          <ol>
            <li>
                Open chrome and navigate to chrome://inspect. You should see a target below with your app.
            </li>
            <br/>
              <li>
                  Next click on  "Open dedicated DevTools for Node"
github nodegui / react-nodegui / examples / weather-app-widget / src / index.tsx View on Github external
temp_max: number;
  };
  name: string;
};

const defaultState = {
  weather: [],
  main: {
    temp: 0,
    temp_min: 0,
    temp_max: 0
  },
  name: "NA"
};

Renderer.render(<App />, {
  onRender: () => {
    console.log("Yo");
  },
  enableDevtools: true
});
github nodegui / examples / react-nodegui / react-router-example / src / pages / Home.tsx View on Github external
export default function Home() {
  const history = useHistory();
  const handler = useEventHandler(
    { [QPushButtonEvents.clicked]: () => history.push("/about") },
    []
  );
  return (
    <View
      style={`
        height: '100%'; 
        align-items: 'center';
        justify-content: 'center';
      `}
    >
      <Text>Home Page</Text>
      <Text>You are now looking at Home Page 🤓</Text>
      <Button on={handler} text="Go to about"></Button>
    </View>
  );
github nodegui / examples / react-nodegui / react-router-example / src / pages / About.tsx View on Github external
export default function About() {
  const history = useHistory();
  const handler = useEventHandler(
    { [QPushButtonEvents.clicked]: () => history.goBack() },
    []
  );
  return (
    <View
      style={`
        height: '100%'; 
        align-items: 'center';
        justify-content: 'center';
    `}
    >
      <Text>About</Text>
      <Text>You are now looking at the About Page 😱</Text>
      <Button on={handler} text={`Go to Home`}></Button>
    </View>
  );
github nodegui / react-nodegui-starter / src / index.tsx View on Github external
module.hot.accept(["./app"], function() {
    Renderer.forceUpdate();
  });
}
github nodegui / react-nodegui-starter / src / app.tsx View on Github external
const styleSheet = `
  #welcome-text {
    font-size: 24px;
    padding-top: 20px;
    qproperty-alignment: 'AlignHCenter';
    font-family: 'sans-serif';
  }

  #step-1, #step-2 {
    font-size: 18px;
    padding-top: 10px;
    padding-horizontal: 20px;
  }
`;

export default hot(App);

@nodegui/react-nodegui

React Native for building cross platform desktop applications

MIT
Latest version published 2 months ago

Package Health Score

73 / 100
Full package analysis

Similar packages

Popular JavaScript code snippets

Find secure code to use in your application or website