npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jsmxq-react

v1.0.17

Published

jsmxq Reactjs glue

Downloads

1

Readme

Message driven reactjs.

jsmxq-react is small glue between messaging library jsmxq and reactjs.

This module enables react components to post and/or receive messages. Any message which is posted must have a subject, based on which message is delivered to interested components. Not only react components you can make other modules of you project message aware, eg a validator can provide validation service, it can validate message data it receieves and post response as message.

Pl have a look at very simple jsmxq-react-demo and jsmxq-react-todo app made using this technology.

Installation:

Use npm to install library.

npm install react
npm install jsmxq
npm install jsmxq-react

Usage:

jsmxq-react provides class XRComponent, which your component should extend. Any component extending XRComponent can take part in messaging.

To post a message, use function post(subject, msgBody) and to respond to incoming message, implement function onMessageReceive(msg). You will get msgBody in msg.content field. Before you can receive any message, you will have to add subjects to your watched subjects. A subject could be a string or regular expression. You use function subscriber.addSubject(subject: string | RegExt) to add subject. Pl note regular expression as a subject is not possible when posting a message, it can be only used when adding to a subject. Any number of subjects can be added.

Please have a look at example below. In this example we create a simple text edit field with validation. This example can downloaded from jsmxq-react-demo.

Please note following in the example

  1. We create edit component named JsmxEdit by extending XRComponent. It is defined in file JsmxEdit.js.
  2. Our edit component posts a message whenever changed. This is done in handleChange(e) function. The message is send with subject 'MYINPUT_CHANGED' .
  3. Parent App component described in file App.js, subscribes to three subjects 'MYINPUT_EDIT_DONE', 'MYINPUT_CHANGED' and /VAL_\B/. This is done in constructor.
  4. App component will receive messages with subject 'MYINPUT_CHANGED', here this message is sent by edit component. Once this message is received, App component posts another message with subject 'VALIDATOR'.
  5. Validator is defind in file validator.js, it subscribes to any messages with subject 'VALIDATOR'. It validates input and posts another message. Pl note validator return posts a message with a subject which it derived from incoming message. Thus sender to validator can specify what subject to be used to in return message.
  6. Message from validator is received by App component, and it updates edit component appropriately. To update component react's setState() is called in oMessageReceive(msg) function.

JsmxEdit.js

import * as React from 'react'
import XRComponent from 'jsmxq-react'

export default class JsmxEdit extends XRComponent {
    constructor(props){
        super(props);
    }

    handleKeyDown() {
        //ENTER_KEY = 13
        if (event.keyCode !== 13) {
            return;
        }

        event.preventDefault();

        var val = this.props.editText.trim();

        if (val) {
         this.post("MYINPUT_EDIT_DONE", { editText: val} );
        }
    }
  
    handleChange(e) {
        this.post("MYINPUT_CHANGED",{editText: e.target.value});
    }

    render() {

        var errLabel = null;
        if(this.props.err) {
            errLabel = <label>{this.props.err}</label>
        }

        return(
            <div>
                <div>
                    <input
                        name='myinput'
                        type='text'
                        value={this.props.editText}
                        onKeyDown={this.handleKeyDown.bind(this)}
                        onChange={this.handleChange.bind(this)}
                    />
                </div>
                <div>
                    {errLabel}
                </div>
            </div>
        )
    }
}

App.js

import React from "react";
import XRComponent from 'jsmxq-react'

import "./App.css";

import TodoEdit from "./JsmxEdit"
import JsmxEdit from "./JsmxEdit"
import gValidator from './validator'

class App extends XRComponent {
  
  constructor(props) {
    super(props);

    this.state = {
      editText: '',
      err: null
    }

    this.subscriber.addSubject("MYINPUT_EDIT_DONE");
    this.subscriber.addSubject("MYINPUT_CHANGED");
    this.subscriber.addSubject(/VAL_\B/);
  }

  onMessageReceive(msg) {
    switch(msg.subject) {
        case 'MYINPUT_EDIT_DONE':
          this.setState({editText: msg.content.editText});
          break;
        case "MYINPUT_CHANGED":
          this.post("VALIDATOR", {
            retSub: "APP_MYINPUT",
            editText: msg.content.editText
          })
          break;
        case "VAL_APP_MYINPUT":
          if(msg.content.err) {
            this.setState({err: msg.content.err});
          } else {
            this.setState({editText: msg.content.editText, err:null})
          }
          break;
      }
  }

  render() {   
    
    return (
      <div>
					<header className="header">
						<h1>Jsmxq.React</h1>						
					</header>

          <JsmxEdit editText={this.state.editText} err={this.state.err}/>
          
				</div>
    )
  }
}

export default App;

validator.js

import XRComponent from 'jsmxq-react'

class Validator extends XRComponent {

    constructor(name) {
        super(name);

        this.subscriber.addSubject("VALIDATOR");
    }

    onMessageReceive(msg) {
        let sub = msg.content.retSub;
        let editText = msg.content.editText;

        if(/[^A-Za-z0-9]+/.test(editText)) {
            this.post("VAL_"+sub, {editText: editText, err: 'only characters and numbers allowed'});
        } else {
            this.post("VAL_"+sub, {editText: editText, err: null});            
        }
    }
}

if(window.gValidator === undefined) {
    window.gValidator = new Validator("Validator");
}

export default window.gValidator