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

importReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./App';importCTRLfrom'react-nc';CTRL.initializeState({name: "iNont"});ReactDOM.render(<App/>,document.getElementById('root'));

App.js

importReact,{Component}from'react';importCTRL,{StateControl}from'react-nc';classAppextendsComponent{render(){return(<div>
My name is {CTRL.state.name}.
<inputvalue={CTRL.state.name}placeholder="Type to change name"onChange={(event)=>CTRL.setState({name: event.target.value})}/></div>);}}exportdefaultStateControl(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

importReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./App';importCTRLfrom'react-nc';CTRL.initializeState({name: "iNont"});ReactDOM.render(<App/>,document.getElementById('root'));

App.js

importReact,{Component}from'react';importCTRL,{StateControl,NCRouter,Route}from'react-nc';importMainPagefrom'./MainPage';importEditPagefrom'./EditPage';importDetailPagefrom'./DetailPage';CTRL.routing.setPrefix("/my-web");classAppextendsComponent{render(){return(<NCRouter><Routedefaultpath="/"component={MainPage}/><Routepath="/edit"component={EditPage}/><Routepath="/detail/{username}"component={DetailPage}/></NCRouter>);}}exportdefaultStateControl(App);

MainPage.js

importReact,{Component}from'react';importCTRLfrom'react-nc';classMainPageextendsComponent{render(){return(<div>
My name is {CTRL.state.name}.
<buttononClick={()=>CTRL.routing.redirect("/edit")}>Edit</button><buttononClick={()=>CTRL.routing.redirect("/detail/"+CTRL.state.name)}>Detail</button></div>);}}exportdefaultMainPage;

EditPage.js

importReact,{Component}from'react';importCTRLfrom'react-nc';classEditPageextendsComponent{render(){return(<div><inputvalue={CTRL.state.name}placeholder="Type to change name"onChange={(event)=>CTRL.setState({name: event.target.value})}/><buttononClick={()=>CTRL.routing.redirect("/")}>Back</button><buttononClick={()=>CTRL.resetState()}>Reset</button></div>);}}exportdefaultEditPage;

DetailPage.js

importReact,{Component}from'react';importCTRLfrom'react-nc';classDetailPageextendsComponent{render(){return(<div>
My username: {this.props.match.params.username}.
<buttononClick={()=>CTRL.routing.redirect("/somewhere-does-not-exist")}>To default page</button></div>);}}exportdefaultDetailPage;

---

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"