🚧 This project is still under development. Any API may change as needed. Bugs and incomplete features are to be expected.

React Node InSim

Introducing React Node InSim, A React renderer for InSim buttons, based on Node.js with TypeScript support. It also provides layout components for easier button positioning, hooks for handling incoming InSim packets and tracking server connections & players.

Installation


or if you use Yarn:


Basic Usage

To connect to an LFS server from your Node.js application, enter its hostname, a port and a short name for your application into the createRoot function, which will create a React root for you. Then you call root.render() just like you would with React DOM.

Quote from Basic usage: github.com/simbroadcasts/react-node-insim :

import { InSimFlags } from 'node-insim/packets';
import { Button, createRoot } from 'react-node-insim';

const root = createRoot({
name: 'React InSim',
host: '127.0.0.1',
port: 29999,
flags: InSimFlags.ISF_LOCAL,
});

root.render(
<Button top={100} left={80} width={30} height={10}>
Hello InSim!
</Button>,
);

Minimal working example app

A Node.js app written in TypeScript, which displays a single button on local LFS.

https://github.com/mkapal/react-node-insim-example

Components showcase

Button


Stack


Flex


Grid


Toggle button


Toggle button group


Text box


Hooks

• useOnConnect
  
• useOnDisconnect
  
• useOnPacket
  
• useConnections
  
• usePlayers
  
• useMessage
  
• useRaceControlMessage
  
• useInSim
  

To learn more, including how to use the InSim button components or InSim hooks, check out the React Node InSim repository on GitHub.

Really cool

I have no idea how it work but amazing work

As someone who doesn't know anything about this subject, can you please tell me how I can run the push-button system? I only have node.js installed. I couldn't manage it

I've created a minimal working example app in TypeScript for you:https://github.com/mkapal/react-node-insim-example

I'll update the README later with more detailed instructions.

IS there a way to show image inside buttons or display an image?

Not possible using InSim.

How do you reset / clear the usePlayers() list?

The usePlayers list should always be in sync the actual list of players in LFS. If it is not, then I'd like to know when that happens because it's a bug.

so From replay to hotlap the list is not deleted or cleared...

Thank you, I will have a look at the issue.

Hey, awesome work. Finally a library I can work with

While developing an InSim app for myself, I needed to show personalised buttons to each connection and human player on track. To abstract away having to assign the button UCIDs manually, I've introduced scopes in the React Node InSim library.

Here's a demo video with two LFS users:
- the "React NodeInSim" button is the same for all connections (UCID 255)
- the username buttons are different for each connection
- the player name buttons are different for each human player on track



Example code:


Demo app source code