React-NC is state container for react app
npm install react-ncYour react state can be anything and anywhere,, Create your universe with React-NC.
- Version 1.2.0: RouteControl is now deprecated,, NCRouter is now provided for route management.
```
npm install react-nc --save
#### index.js`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(
, document.getElementById('root'));
`
#### App.js`js
import React, { Component } from 'react';
import CTRL, { StateControl } from 'react-nc';
class App extends Component {
render() {
return (
export default StateControl(App);
`
---
#### CTRL.initializeState(initialState)
Set the initial state of CTRL.
`js
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.
`js
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.
---
NCRouter helps you manage your routes, it's easy to route to the path you want to. CTRL.redirect("/path")
Note: You can still use with react-router-dom same as the previous version
#### index.js
`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(
, document.getElementById('root'));
`
#### App.js`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 (
);
}
}
export default StateControl(App);
`
#### MainPage.js`js
import React, { Component } from 'react';
import CTRL from 'react-nc';
class MainPage extends Component {
render() {
return (
export default MainPage;
`
#### EditPage.js`js
import React, { Component } from 'react';
import CTRL from 'react-nc';
class EditPage extends Component {
render() {
return (
export default EditPage;
`
#### DetailPage.js`js
import React, { Component } from 'react';
import CTRL from 'react-nc';
class DetailPage extends Component {
render() {
return (
export default DetailPage;
`
---
#### CTRL.routing.setPrefix(prefix)
Set prefix of your routes. Then, all of your paths will be started with that prefix.
`js
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.
`js
CTRL.routing.setPrefix("/my-web");
CTRL.routing.redirect("/edit");
// location will be "/my-web/edit"
`
or path as object
`js
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.
`js
CTRL.routing.setPrefix("/my-web");
CTRL.routing.redirect("/edit");
CTRL.routing.query({
id: "inont"
});
// location will be "/my-web/edit?id=inont"
``