Package Exports

react-nc

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-nc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-NC

Your react state can be anything and anywhere,, Create your universe with React-NC.

Updated

Version 1.2.0: RouteControl is now deprecated,, NCRouter is now provided for route management.

Installation

npm install react-nc --save

Example

`index.js`

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import CTRL from 'react-nc';

CTRL.initializeState({
  name: "iNont"
});

ReactDOM.render(
  <App />
, document.getElementById('root'));

`App.js`

import React, { Component } from 'react';

import CTRL, { StateControl } from 'react-nc';

class App extends Component {
  render() {
    return (
      <div>
        My name is {CTRL.state.name}.
        <input value={CTRL.state.name} placeholder="Type to change name"
          onChange={(event)=>CTRL.setState({ name: event.target.value })} />
      </div>
    );
  }
}

export default StateControl(App);

Commands

`CTRL.initializeState(initialState)`

Set the initial state of CTRL.

CTRL.initializeState({
  name: "iNont",
  title: "React-NC",
  array: [0, 1, 2, 3]
});

console.log(`My name is ${CTRL.state.name}.`);

// Output: My name is iNont.

`CTRL.setState(state)`

Set state of CTRL, you can use it likes setState() of react component.

CTRL.initializeState({
  name: "iNont",
  title: "React-NC",
  array: [0, 1, 2, 3]
});
CTRL.setState({
  name: "Changed name"
});

console.log(CTRL.state);

/* Output: {
  name: "Changed name",
  title: "React-NC",
  array: [0, 1, 2, 3]
} */

`CTRL.resetState()`

Reset CTRL state to initial state.

`CTRL.forceUpdate()`

Force update the component wrapped by StateControl.

React-NC with NCRouter

NCRouter helps you manage your routes, it's easy to route to the path you want to.
Note: You can still use CTRL.redirect("/path") with react-router-dom same as the previous version

Example

`index.js`

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import CTRL from 'react-nc';

CTRL.initializeState({
  name: "iNont"
});

ReactDOM.render(
  <App />
, document.getElementById('root'));

`App.js`

import React, { Component } from 'react';

import CTRL, { StateControl, NCRouter, Route } from 'react-nc';

import MainPage from './MainPage';
import EditPage from './EditPage';
import DetailPage from './DetailPage';

CTRL.routing.setPrefix("/my-web");

class App extends Component {
  render() {
    return (
      <NCRouter>
        <Route default path="/" component={MainPage} />
        <Route path="/edit" component={EditPage} />
        <Route path="/detail/{username}" component={DetailPage} />
      </NCRouter>
    );
  }
}

export default StateControl(App);

`MainPage.js`

import React, { Component } from 'react';

import CTRL from 'react-nc';

class MainPage extends Component {
  render() {
    return (
      <div>
        My name is {CTRL.state.name}.
        <button onClick={()=>CTRL.routing.redirect("/edit")}>Edit</button>
        <button onClick={()=>CTRL.routing.redirect("/detail/"+CTRL.state.name)}>Detail</button>
      </div>
    );
  }
}

export default MainPage;

`EditPage.js`

import React, { Component } from 'react';

import CTRL from 'react-nc';

class EditPage extends Component {
  render() {
    return (
      <div>
        <input value={CTRL.state.name} placeholder="Type to change name"
          onChange={(event)=>CTRL.setState({ name: event.target.value })} />
        <button onClick={()=>CTRL.routing.redirect("/")}>Back</button>
        <button onClick={()=>CTRL.resetState()}>Reset</button>
      </div>
    );
  }
}

export default EditPage;

`DetailPage.js`

import React, { Component } from 'react';

import CTRL from 'react-nc';

class DetailPage extends Component {
  render() {
    return (
      <div>
          My username: {this.props.match.params.username}.
        <button onClick={()=>CTRL.routing.redirect("/somewhere-does-not-exist")}>To default page</button>
      </div>
    );
  }
}

export default DetailPage;

Commands

`CTRL.routing.setPrefix(prefix)`

Set prefix of your routes. Then, all of your paths will be started with that prefix.

CTRL.routing.setPrefix("/my-web");

// If your path is "/edit", it will be "/my-web/edit" in browser url

`CTRL.routing.redirect(path)`

Redirect to path, path can be string or object.

CTRL.routing.setPrefix("/my-web");
CTRL.routing.redirect("/edit");

// location will be "/my-web/edit"

or path as object

CTRL.routing.setPrefix("/my-web");
CTRL.routing.redirect({
  pathname: "edit",
  search: "?id=inont",
  hash: "#top"
});

// location will be "/my-web/edit?id=inont#top"

`CTRL.routing.replacePath(path)`

Replace the current path to path.

`CTRL.routing.query(query)`

query as object, this will change query string on url to query.

CTRL.routing.setPrefix("/my-web");
CTRL.routing.redirect("/edit");
CTRL.routing.query({
  id: "inont"
});

// location will be "/my-web/edit?id=inont"