Guest User

Untitled

a guest
Dec 12th, 2018
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.22 KB | None | 0 0
  1. interface BannerProps {
  2. message: string;
  3. background: string;
  4. color: string;
  5. }
  6.  
  7. class App extends React.Component {
  8. readonly state: AppState = {
  9. banner: {
  10. messageComponent: '',
  11. showBanner: false,
  12. }
  13. };
  14.  
  15. render(): JSX.Element {
  16. return (
  17. <AppProvider value={
  18. {
  19. appState: this.state,
  20. appActions: {
  21. closeBanner: () => this.setState({
  22. banner: {
  23. ...this.state.banner,
  24. showBanner: false,
  25. }
  26. }),
  27. openBanner: () => this.setState({
  28. banner: {
  29. ...this.state.banner,
  30. showBanner: true,
  31. }
  32. }),
  33. setBannerOptions: (options: BannerProps) => this.setState({
  34. banner: {
  35. ...this.state.banner,
  36. messageComponent: options.message,
  37. }
  38. }),
  39. }
  40. }
  41. }>
  42. <Header />
  43. <AppRoutes />
  44. <Footer />
  45. </AppProvider>
  46. );
  47. }
  48.  
  49. <AppConsumer>
  50. {({ appState: { banner } }: AppConsumerProps) => {
  51. return banner.showBanner ? <Banner message={banner.messageComponent} /> : <></>;
  52. }}
  53. </AppConsumer>
Add Comment
Please, Sign In to add comment