kyb-infrastructure-react
v1.0.6
Published
KybInfrastructure for React applications
Downloads
15
Readme
kyb-infrastructure-react
Provides various functionalities for React application development
Installation
Use the package manager npm to install kyb-infrastructure-react.
npm i kyb-infrastructure-react
Usage
To initialize kyb-infrastructure-react, you must inherit your root component from InitializerComponent
and put ApplicationState.Provider
to top of React Nodes and set value prop as this.state
as follows;
import { ApplicationContextBase, InitializerComponent, ApplicationState } from "kyb-infrastructure-react";
import applicationParameters from "./applicationParameters.json";
import {
BrowserRouter as Router, Link, Route, Routes
} from 'react-router-dom';
import HelloWorldComponent from 'HelloWorldComponent';
export interface ApplicationContext extends ApplicationContextBase {
extraValue: string;
}
// You must inherit your root component from InitializerComponent,
// and set TContext type of it as your context type of application !
export default class App extends InitializerComponent<any, ApplicationContext> {
constructor(props: any) {
super(props, {
applicationParameters: applicationParameters,
backendBaseUrl: "https://jsonplaceholder.typicode.com",
extraValue: "some-extra"
});
}
render() {
if (!this.state?.isContextInitialized) {
return <h2>Loading..</h2>;
}
return (
// You must put ApplicationState.Provider to top of nodes !
<ApplicationState.Provider value={this.state}>
<Router>
<Routes>
<Route path="/sayHello" element={<HelloWorldComponent />} />
<Route path="*" element={<>
<h1>Welcome to kyb-infrastructure demo app!</h1>
<Link to="/sayHello" >
<a>
Click for HelloWorldComponent component!
</a>
</Link>
</>} />
</Routes>
</Router>
</ApplicationState.Provider >
);
}
}
kyb-infrastructure-react initializes a context for whole application scope by your context type. You can access the context all of components which is inherited from BaseComponent
as follows;
import { BaseComponent } from "kyb-infrastructure-react"
import { ApplicationContext } from 'App';
import { HttpResponse, HttpMethods } from "kyb-infrastructure"
type HelloWorldComponentProps = {
};
type HelloWorldComponentState = {
content: string
};
export default class HelloWorldComponent
extends BaseComponent<HelloWorldComponentProps, HelloWorldComponentState, ApplicationContext> {
constructor(props: any) {
super(props);
this.state = {
content: ""
}
}
async componentDidMount() {
let response: HttpResponse | undefined = await this.getContext()
.httpClient?.SendRequest(HttpMethods.GET, "/posts");
this.setState({
content: JSON.stringify(response?.body)
})
this.setContext((context) => {
context.extraValue = `I can change the application context from any
component which is inherited from BaseComponent!`
});
}
render() {
return (
<>
<h1>
Hello World ! I can send a HTTP request via HttpClient
which is a module in the application context
</h1>
<br />
<h2>Response from the request: </h2>
<br />
<div>
{this.state.content}
</div>
</>
)
}
}
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.