Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- interface BannerProps {
- message: string;
- background: string;
- color: string;
- }
- class App extends React.Component {
- readonly state: AppState = {
- banner: {
- messageComponent: '',
- showBanner: false,
- }
- };
- render(): JSX.Element {
- return (
- <AppProvider value={
- {
- appState: this.state,
- appActions: {
- closeBanner: () => this.setState({
- banner: {
- ...this.state.banner,
- showBanner: false,
- }
- }),
- openBanner: () => this.setState({
- banner: {
- ...this.state.banner,
- showBanner: true,
- }
- }),
- setBannerOptions: (options: BannerProps) => this.setState({
- banner: {
- ...this.state.banner,
- messageComponent: options.message,
- }
- }),
- }
- }
- }>
- <Header />
- <AppRoutes />
- <Footer />
- </AppProvider>
- );
- }
- <AppConsumer>
- {({ appState: { banner } }: AppConsumerProps) => {
- return banner.showBanner ? <Banner message={banner.messageComponent} /> : <></>;
- }}
- </AppConsumer>
Add Comment
Please, Sign In to add comment