Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mkrl/nodecg-react
A NodeCG kickstart bundle, powered up by React and Parcel
https://github.com/mkrl/nodecg-react
Last synced: about 15 hours ago
JSON representation
A NodeCG kickstart bundle, powered up by React and Parcel
- Host: GitHub
- URL: https://github.com/mkrl/nodecg-react
- Owner: mkrl
- License: mit
- Created: 2019-07-04T10:01:53.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T17:02:28.000Z (almost 2 years ago)
- Last Synced: 2023-09-22T20:37:51.560Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 998 KB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nodecg-react
This is a [NodeCG](http://github.com/nodecg/nodecg) boilerplate bundle, powered by React, Parcel and a Flux-like pattern system for an easy state-to-[replicant](https://nodecg.com/NodeCG.html#Replicant) management.
It works with NodeCG versions which satisfy this [semver](https://docs.npmjs.com/getting-started/semantic-versioning) range: `^1.1.1`
## Getting started
Copy/clone the repo into your `bundles` folder that is located in the root folder of your NodeCG instance.
```bash
cd bundles
git clone [email protected]:mkrl/nodecg-react.git
cd nodecg-react
```
Install dependencies with `yarn` or `npm`
```bash
yarn
# or
npm i
```
Start up your NodeCG instance.
In order to generate asset bundle from sources, run `npm start` at least once, as the repository does not initially come with pre-compiled assets.
## Developing
[Parcel](https://parceljs.org/) is a zero-configuration asset bundler. We use [Babel](https://babeljs.io/) to compile modern JavaScript with React into a single asset file that lives in our `/graphics` folder.
In order to get started, run
```bash
npm start
```
This will spin up Parcel watch mode. Open your app through a NodeCG "graphics" tab. You can now make desired changes to your source files under `/src` and they will automatically be hot-reloaded in your browser.
## Working with replicants and component state
The main purpose of this bundle is to create a reliable bridge between replicants and React state using Flux-like store.
Let's say, we have a basic class-based root component (this is exactly what this bundle comes with):
```js
...
class App extends React.Component {
constructor() {
super()
this.state = {
name: "Brandon"
}
}
render() {
return (
Hello, {this.state.name}!
)
}
}
...
```
Connecting to NodeCG replicants can then be done by importing `replicate` from our `stores/NodecgStore.js`. It is a function that takes a single argument - a replicant name.
After subscribing to a replicant, all you need to do is listen for changes on the store. At the very end our component should look something like this:
```js
...
import NCGStore from './stores/NodecgStore'
import { replicate } from './stores/NodecgStore'
class App extends React.Component {
constructor() {
super()
this.state = {
replicants: NCGStore.getReplicants(),
}
}
componentDidMount() {
// Subscribing to replicant changes
replicate("name")
// We keep all our subscribed replicants in a single "replicants" object
NCGStore.on("change", () => {
this.setState({
replicants: NCGStore.getReplicants(),
})
})
}
render() {
return (
Hello, {this.state.replicants.name}!
)
}
}
...
```
Don't forget to define your replicants themselves, somewhere in your extension or a panel:
```js
// extension.js
module.exports = nodecg => {
const nameReplicant = nodecg.Replicant('name', {defaultValue: "Brandon"})
}
```
Your component state will now be updated automatically whenever you initiate a replicant value change.
Bear in mind, if you don't declare your replicants before subscribing to them with `replicate()`, their initial value will be set to `undefined`, no matter what `defaultValue` is being passed to the declaring statement.
## Building
Even though running in a watch mode does produce working pieces of code, you are going to need a production build after you are done with your development process. Generating optimized and minified graphics is as simple as:
```bash
npm run build
```
## Contributing
Feel free to contribute, following this conventional and simple process:
1. [Fork](https://github.com/mkrl/nodecg-react/fork)
2. Create your feature branch (`git checkout -b new-cool-stuff`)
3. Commit (`git commit -am 'Add stuff'`)
4. Push to the branch (`git push origin new-cool-stuff`)
5. Create a new Pull Request
Please note that this is still an early work-in-progress.