2024-02-20 09:23:32 +00:00
<!doctype html>
2025-08-13 03:24:27 +00:00
< html lang = "en-GB" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-undefined" data-has-hydrated = "false" >
2024-02-20 09:23:32 +00:00
< head >
< meta charset = "UTF-8" >
2025-08-13 03:24:27 +00:00
< meta name = "generator" content = "Docusaurus v3.8.1" >
2025-10-03 05:55:52 +00:00
< title data-rh = "true" > Build React DApps Using @waku/react | Waku Documentation< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:url" content = "https://docs.waku.org/build/javascript/use-waku-react" > < meta data-rh = "true" property = "og:locale" content = "en_GB" > < meta data-rh = "true" name = "docusaurus_locale" content = "en-GB" > < meta data-rh = "true" name = "docsearch:language" content = "en-GB" > < meta data-rh = "true" name = "keywords" content = "waku, web3" > < meta data-rh = "true" name = "image" content = "https://docs.waku.org/_og/46c880f81ab36d07c126bb48acc6882356925be3.png" > < meta data-rh = "true" name = "docusaurus_version" content = "current" > < meta data-rh = "true" name = "docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" property = "og:title" content = "Build React DApps Using @waku/react | Waku Documentation" > < meta data-rh = "true" name = "description" content = "Currently, the JavaScript Waku SDK (@waku/sdk) is NOT compatible with React Native. We plan to add support for React Native in the future." > < meta data-rh = "true" property = "og:description" content = "Currently, the JavaScript Waku SDK (@waku/sdk) is NOT compatible with React Native. We plan to add support for React Native in the future." > < link data-rh = "true" rel = "icon" href = "/theme/image/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://docs.waku.org/build/javascript/use-waku-react" > < link data-rh = "true" rel = "alternate" href = "https://docs.waku.org/build/javascript/use-waku-react" hreflang = "en-GB" > < link data-rh = "true" rel = "alternate" href = "https://docs.waku.org/build/javascript/use-waku-react" hreflang = "x-default" > < link rel = "alternate icon" type = "image/png" href = "/theme/image/favicon.png" >
< link rel = "icon" type = "image/svg+xml" href = "/theme/image/favicon.svg" > < link rel = "stylesheet" href = "/assets/css/styles.f0961b96.css" >
2025-10-27 23:35:15 +00:00
< script src = "/assets/js/runtime~main.4a8ea766.js" defer = "defer" > < / script >
< script src = "/assets/js/main.cd8c4833.js" defer = "defer" > < / script >
2025-08-13 03:24:27 +00:00
< meta property = "og:image" content = "https://docs.waku.org/_og/46c880f81ab36d07c126bb48acc6882356925be3.png" > < meta name = "twitter:image" content = "https://docs.waku.org/_og/46c880f81ab36d07c126bb48acc6882356925be3.png" > < / head >
2024-02-20 09:23:32 +00:00
< body class = "navigation-with-keyboard" >
2025-08-13 03:24:27 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" style = "display: none;" > < defs >
< symbol id = "theme-svg-external-link" viewBox = "0 0 24 24" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / symbol >
< / defs > < / svg >
< script > ! function ( ) { var t = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return window . localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; document . documentElement . setAttribute ( "data-theme" , t || ( window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ? "dark" : "light" ) ) , document . documentElement . setAttribute ( "data-theme-choice" , t || "system" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = "__docusaurus" > < link rel = "preload" as = "image" href = "/theme/image/logo-black.svg" > < link rel = "preload" as = "image" href = "/theme/image/logo.svg" > < style data-emotion = "css-global 3rtehh" > . lsd-button { width : auto ; cursor : pointer ; padding : 6 px 24 px ; } . lsd-button--disabled { cursor : default ; opacity : 0.34 ; } . lsd-button--large { padding : 10 px 40 px ; } . lsd-button--medium { padding : 6 px 24 px ; } . lsd-button--small { padding : 6 px 12 px ; } . lsd-button : hover : not ( . lsd-button--disabled ) . lsd-button__text { -webkit- text-decoration : underline ; text-decoration : underline ; } . lsd-button--with-icon { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; } . lsd-button__icon { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- box-pack : center ; -ms- flex-pack : center ; -webkit- justify-content : center ; justify-content : center ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; height : 100 % ; } . lsd-button--large . lsd-button--with-icon { padding : 10 px 0 px 10 px 18 px ; } . lsd-button--large . lsd-button--with-icon . lsd-button__icon { width : 42 px ; } . lsd-button--medium . lsd-button--with-icon { padding : 6 px 0 px 6 px 14 px ; } . lsd-button--medium . lsd-button--with-icon . lsd-button__icon { width : 38 px ; } . lsd-button--small . lsd-button--with-icon { padding : 6 px 0 px 6 px 12 px ; } . lsd-button--small . lsd-button--with-icon . lsd-button__icon { width : 34 px ; } . lsd-button--outlined { background : none ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-button--outlined . lsd-button__text { color : rgb ( var ( - - lsd - text - primary ) ) ; } . lsd-button--filled { background : rgb ( var ( - - lsd - surface - secondary ) ) ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-button--filled . lsd-button__text { color : rgb ( var ( - - lsd - text - secondary ) ) ; } < / style > < style data-emotion = "css-global 10bahxd" > . lsd-icon-button { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- flex-direction : row ; -ms- flex-direction : row ; flex-direction : row ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; -webkit- box-pack : center ; -ms- flex-pack : center ; -webkit- justify-content : center ; justify-content : center ; cursor : pointer ; background : none ; padding : 0 ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-icon-button--filled { background-color : rgb ( var ( - - lsd - icon - primary ) ) ; } . lsd-icon-button--filled svg { --lsd-icon-primary : var ( - - lsd - icon - secondary ) ; } . lsd-icon-button--disabled { opacity : 0.34 ; cursor : default ; } . lsd-icon-button--large { width : 40 px ; height : 40 px ; } . lsd-icon-button--medium { width : 32 px ; height : 32 px ; } . lsd-icon-button--small { width : 28 px ; height : 28 px ; } < / style > < style data-emotion = "css-global icqph9" > . lsd-icon-button-group { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- flex-direction : row ; -ms- flex-direction : row ; flex-direction : row ; } . lsd-icon-button-group--outlined . lsd-icon-button : not ( : last-child ) { border-right : none ; } < / style > < style data-emotion = "css-global 1f43ub2" > b o d y * { f o n t - f a m i l y : v a r ( - - l s d - t y p o g r a p h y - g e n e r i c - f o n t - f a m i l y ) ; } . l s d - t y p o g r a p h y { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; } . l s d - t y p o g r a p h y - - s a n s - s e r i f , . l s d - t y p o g r a p h y - - s a n s - s e r i f * { f o n t - f a m i l y : s a n s - s e r i f ; } . l s d - t y p o g r a p h y - - s e r i f , . l s d - t y p o g r a p h y - - s e r i f * { f o n t - f a m i l y : s e r i f ; } . l s d - t y p o g r a p h y - - m o n o s p a c e , . l s d - t y p o g r a p h y - - m o n o s p a c e * { f o n t - f a m i l y : m o n o s p a c e ; } . l s d - t y p o g r a p h y - - d i s p l a y 1 { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; f o n t - w e i g h t : v a r ( - - l s d - d i s p l a y 1 - f o n t W e i g h t ) ; f o n t - s i z e : v a r ( - - l s d
2024-02-20 09:23:32 +00:00
.lsd-dropdown--error
) .lsd-dropdown__trigger:hover .lsd-dropdown__option-label,.lsd-dropdown:not(.lsd-dropdown--disabled):not(
.lsd-dropdown--error
2025-10-27 23:35:15 +00:00
) .lsd-dropdown__trigger:focus .lsd-dropdown__option-label{-webkit-text-decoration:underline;text-decoration:underline;}.lsd-dropdown__label{display:block;}.lsd-dropdown__button-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}.lsd-dropdown__trigger{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;border:none;cursor:pointer;background:none;}.lsd-dropdown__trigger:focus{outline:none;}.lsd-dropdown__option-label{cursor:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.lsd-dropdown__icons{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;gap:8px;}.lsd-dropdown__icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.lsd-dropdown__supporting-text{margin:6px 14px;}.lsd-dropdown--error .lsd-dropdown__option-label{-webkit-text-decoration:line-through;text-decoration:line-through;}.lsd-dropdown--disabled{opacity:0.34;cursor:initial;}.lsd-dropdown--large{width:208px;}.lsd-dropdown--large.lsd-dropdown--error{width:230px;}.lsd-dropdown--large .lsd-dropdown__label{margin:0 0 6px 18px;}.lsd-dropdown--large .lsd-dropdown__button-container{height:40px;}.lsd-dropdown--large .lsd-dropdown__trigger{padding:10px 0px 10px 18px;}.lsd-dropdown--large .lsd-dropdown__icons{padding:0px 14px;}.lsd-dropdown--medium{width:188px;}.lsd-dropdown--medium.lsd-dropdown--error{width:210px;}.lsd-dropdown--medium .lsd-dropdown__label{margin:0 0 6px 14px;}.lsd-dropdown--medium .lsd-dropdown__button-container{height:32px;}.lsd-dropdown--medium .lsd-dropdown__trigger{padding:6px 0px 6px 14px;}.lsd-dropdown--medium .lsd-dropdown__icons{padding:0px 12px;}.lsd-dropdown--small{width:164px;}.lsd-dropdown--small.lsd-dropdown--error{width:186px;}.lsd-dropdown--small .lsd-dropdown__label{margin:0 0 6px 12px;}.lsd-dropdown--small .lsd-dropdown__button-container{height:28px;}.lsd-dropdown--small .lsd-dropdown__trigger{padding:6px 0px 6px 12px;}.lsd-dropdown--small .lsd-dropdown__icons{padding:0px 10px;}.lsd-dropdown--outlined .lsd-dropdown__button-container{border:1px solid rgb(var(--lsd-border-primary));}.lsd-dropdown--underlined .lsd-dropdown__button-container{border:1px solid transparent;border-bottom:1px solid rgb(var(--lsd-border-primary));}< / style > < style data-emotion = "css-global w2g5fy" > . l s d - d r o p d o w n - i t e m { w i d t h : 1 0 0 % ; b o x - s i z i n g : b o r d e r - b o x ; d i s p l a y : - w e b k i t - b o x ; d i s p l a y : - w e b k i t - f l e x ; d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x ; - w e b k i t - f l e x - d i r e c t i o n : r o w ; - m s - f l e x - d i r e c t i o n : r o w ; f l e x - d i r e c t i o n : r o w ; - w e b k i t - a l i g n - i t e m s : c e n t e r ; - w e b k i t - b o x - a l i g n : c e n t e r ; - m s - f l e x - a l i g n : c e n t e r ; a l i g n - i t e m s : c e n t e r ; b o r d e r : 1 p x s o l i d r g b ( v a r ( - - l s d - b o r d e r - p r i m a r y ) ) ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) { c u r s o r : p o i n t e r ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : h o v e r , . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : f o c u s { o u t l i n e : n o n e ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : h o v e r . l s d - d r o p d o w n - i t e m _ _ l a b e l , . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : f o c u s . l s d - d r o p d o w n - i t e m _ _ l a b e l { - w e b k i t - t e x t - d e c o r a t i o n : u n d e r l i n e ; t e x t - d e c o r a t i o n : u n d e r l i n e ; } . l s d - d r o p d o w n - i t e m _ _ l a b e l { d i s p l a y : b l o c k ; o v e r f l o w : h i d d e n ; w h i t e - s p a c e : n o w r a p ; t e x t - o v e r f l o w : e l l i p s i s ; } . l s d - d r o p d o w n - i t e m - - d i s a b l e d { o p a c i t y : 0 . 3 4 ; } . l s d - d r o p d o w n - i t e m _ _ i c o n { m a r g i n - r i g h t : 1 8 p x ; - w e b k i t - f l e x - s h r i n k : 0 ; - m s - f l e x - n e g a t i v e : 0 ; f l e x - s h r i n k : 0 ; } . l s d - d r o p d o w n - i t e m - - s m a l l { p a d d i n g : 5 p x 9 p x ; h e i g h t : 2 8 p x ; } . l
2025-08-13 03:24:27 +00:00
< p > The < a href = "https://www.npmjs.com/package/@waku/react" target = "_blank" rel = "noopener noreferrer" > @waku/react< / a > package provides components and UI adapters to integrate < code > @waku/sdk< / code > into React applications effortlessly. This guide provides detailed steps for using < code > @waku/react< / code > in your project.< / p >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "install-the-dependencies" > Install the dependencies< a href = "#install-the-dependencies" class = "hash-link" aria-label = "Direct link to Install the dependencies" title = "Direct link to Install the dependencies" > < / a > < / h2 >
< p > First, set up a project using any < a href = "https://react.dev/learn/start-a-new-react-project" target = "_blank" rel = "noopener noreferrer" > production-grade React framework< / a > or an existing React application. For this guide, we will create a boilerplate using < a href = "https://vitejs.dev/guide/" target = "_blank" rel = "noopener noreferrer" > ViteJS< / a > :< / p >
< div class = "tabs-container tabList__CuJ" > < ul role = "tablist" aria-orientation = "horizontal" class = "tabs" > < li role = "tab" tabindex = "0" aria-selected = "true" class = "tabs__item tabItem_LNqP tabs__item--active" > NPM< / li > < li role = "tab" tabindex = "-1" aria-selected = "false" class = "tabs__item tabItem_LNqP" > Yarn< / li > < / ul > < div class = "margin-top--md" > < div role = "tabpanel" class = "tabItem_Ymn6" > < div class = "language-shell codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > npm create vite@latest [PROJECT DIRECTORY] -- --template react< / span > < br > < / span > < / code > < / pre > < / div > < / div > < / div > < div role = "tabpanel" class = "tabItem_Ymn6" hidden = "" > < div class = "language-shell codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > yarn create vite [PROJECT DIRECTORY] --template react< / span > < br > < / span > < / code > < / pre > < / div > < / div > < / div > < / div > < / div >
< p > Next, install the required packages for integrating < code > @waku/sdk< / code > using your preferred package manager:< / p >
< div class = "tabs-container tabList__CuJ" > < ul role = "tablist" aria-orientation = "horizontal" class = "tabs" > < li role = "tab" tabindex = "0" aria-selected = "true" class = "tabs__item tabItem_LNqP tabs__item--active" > NPM< / li > < li role = "tab" tabindex = "-1" aria-selected = "false" class = "tabs__item tabItem_LNqP" > Yarn< / li > < / ul > < div class = "margin-top--md" > < div role = "tabpanel" class = "tabItem_Ymn6" > < div class = "language-shell codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > npm install @waku/react @waku/sdk protobufjs< / span > < br > < / span > < / code > < / pre > < / div > < / div > < / div > < div role = "tabpanel" class = "tabItem_Ymn6" hidden = "" > < div class = "language-shell codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > yarn add @waku/react @waku/sdk protobufjs< / span > < br > < / span > < / code > < / pre > < / div > < / div > < / div > < / div > < / div >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "initialise-the-waku-provider" > Initialise the Waku provider< a href = "#initialise-the-waku-provider" class = "hash-link" aria-label = "Direct link to Initialise the Waku provider" title = "Direct link to Initialise the Waku provider" > < / a > < / h2 >
< p > In the < code > main.jsx< / code > file, which serves as the entry point for a React app, we will set up the < code > LightNodeProvider< / code > < a href = "https://react.dev/reference/react/createContext#provider" target = "_blank" rel = "noopener noreferrer" > context provider< / a > to wrap the entire application within the Waku provider. Import the following on top of your file:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > src/main.jsx< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > LightNodeProvider< / span > < span class = "token imports" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/react" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Set the Light Node options< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > < / span > < span class = "token constant" style = "color:rgb(189, 147, 249)" > NODE_OPTIONS< / span > < span class = "token plain" > < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < span class = "token literal-property property" > defaultBootstrap< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token boolean" > true< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > ReactDOM< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > createRoot< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token dom variable" style = "color:rgb(189, 147, 249);font-style:italic" > document< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > getElementById< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' root' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > render< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Use the Light Node conte
< p > Next, create and start a < a href = "/learn/glossary#light-node" > Light Node< / a > using the < code > useWaku()< / code > function within the < code > App.jsx< / code > file:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > src/App.jsx< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > useWaku < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/react" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function maybe-class-name" style = "color:rgb(80, 250, 123)" > App< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create and start a Light Node< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > error< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > isLoading < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > useWaku< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // " node" is the created Light Node< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // " error" captures any error that occurs during node creation< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // " isLoading" indicates whether the node is still being created< / span > < span class = "token plain" > < /spa
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "build-the-application-interface" > Build the application interface< a href = "#build-the-application-interface" class = "hash-link" aria-label = "Direct link to Build the application interface" title = "Direct link to Build the application interface" > < / a > < / h2 >
< p > Let' s build a user interface for sending messages and viewing past messages, modify the < code > App.jsx< / code > file with the following code block:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > src/App.jsx< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > useState< / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token imports" > useEffect < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' react' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > useWaku < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/react" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createEncoder< / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token imports" > createDecoder < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/sdk" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports" > protobuf< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' protobufjs' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' ./App.css' < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "toke
2025-10-03 05:55:52 +00:00
< div class = "theme-admonition theme-admonition-info alert--info admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M7.33334 11.3333H8.66668V7.33331H7.33334V11.3333ZM8.00001 5.99998C8.1889 5.99998 8.34734 5.93598 8.47534 5.80798C8.60334 5.67998 8.66712 5.52176 8.66668 5.33331C8.66668 5.14442 8.60268 4.98598 8.47468 4.85798C8.34668 4.72998 8.18845 4.6662 8.00001 4.66665C7.81112 4.66665 7.65268 4.73065 7.52468 4.85865C7.39668 4.98665 7.3329 5.14487 7.33334 5.33331C7.33334 5.5222 7.39734 5.68065 7.52534 5.80865C7.65334 5.93665 7.81157 6.00042 8.00001 5.99998ZM8.00001 14.6666C7.07779 14.6666 6.21112 14.4915 5.40001 14.1413C4.5889 13.7911 3.88334 13.3162 3.28334 12.7166C2.68334 12.1166 2.20845 11.4111 1.85868 10.6C1.5089 9.78887 1.33379 8.9222 1.33334 7.99998C1.33334 7.07776 1.50845 6.21109 1.85868 5.39998C2.2089 4.58887 2.68379 3.88331 3.28334 3.28331C3.88334 2.68331 4.5889 2.20842 5.40001 1.85865C6.21112 1.50887 7.07779 1.33376 8.00001 1.33331C8.92223 1.33331 9.7889 1.50842 10.6 1.85865C11.4111 2.20887 12.1167 2.68376 12.7167 3.28331C13.3167 3.88331 13.7918 4.58887 14.142 5.39998C14.4922 6.21109 14.6671 7.07776 14.6667 7.99998C14.6667 8.9222 14.4916 9.78887 14.1413 10.6C13.7911 11.4111 13.3162 12.1166 12.7167 12.7166C12.1167 13.3166 11.4111 13.7918 10.6 14.142C9.7889 14.4922 8.92223 14.6671 8.00001 14.6666ZM8.00001 13.3333C9.4889 13.3333 10.75 12.8166 11.7833 11.7833C12.8167 10.75 13.3333 9.48887 13.3333 7.99998C13.3333 6.51109 12.8167 5.24998 11.7833 4.21665C10.75 3.18331 9.4889 2.66665 8.00001 2.66665C6.51112 2.66665 5.25001 3.18331 4.21668 4.21665C3.18334 5.24998 2.66668 6.51109 2.66668 7.99998C2.66668 9.48887 3.18334 10.75 4.21668 11.7833C5.25001 12.8166 6.51112 13.3333 8.00001 13.3333Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > info< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > In the code above, we also created a message < code > encoder< / code > and < code > decoder< / code > using the < code > createEncoder()< / code > and < code > createDecoder()< / code > functions, along with the application < a href = "/build/javascript/#message-structure" > message structure< / a > with Protobuf.< / p > < / span > < / div > < / div >
2025-08-13 03:24:27 +00:00
< p > Next, modify the < code > App.css< / code > file with the following code block:< / p >
< div class = "language-css codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > src/App.css< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-css codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token selector id" style = "color:rgb(255, 121, 198)" > #root< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > margin< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > :< / span > < span class = "token plain" > < / span > < span class = "token number" > 0< / span > < span class = "token plain" > auto< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token selector class" style = "color:rgb(255, 121, 198)" > .chat-interface< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > display< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > :< / span > < span class = "token plain" > flex< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > flex-direction< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > :< / span > < span class = "token plain" > column< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > height< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > :< / span > < span class = "token plain" > < / span > < span class = "token number" > 100< / span > < span class = "token unit" > vh< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > border< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > :< / span > < span class = "token plain" > < / span > < span class = "token number" > 1< / span > < span class = "token unit" > px< / span > < span class = "token plain" > solid < / span > < span class = "token hexcode color" > #ccc< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token selector class" style = "color:rgb(255, 121, 198)" > .chat-body< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style =
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "send-messages-using-light-push" > Send messages using light push< a href = "#send-messages-using-light-push" class = "hash-link" aria-label = "Direct link to Send messages using light push" title = "Direct link to Send messages using light push" > < / a > < / h2 >
2025-10-03 05:55:52 +00:00
< p > To send messages in our application, we need to modify the < code > sendMessage()< / code > function to serialize user input into our Protobuf structure and < a href = "/build/javascript/light-send-receive#send-messages-using-light-push" > push it to the network< / a > using the < code > useLightPush()< / code > function:< / p >
2025-08-13 03:24:27 +00:00
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > src/App.jsx< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > useLightPush < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/react" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function maybe-class-name" style = "color:rgb(80, 250, 123)" > App< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Bind push method to a node and encoder< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > push < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > useLightPush< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > encoder < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Send the message using Light Push< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > < / span > < span class = "token function-variable function" style = "color:rgb(80, 250, 123)" > sendMessage< / span > < span class = "token plain" > < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword"
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "receive-messages-using-filter" > Receive messages using filter< a href = "#receive-messages-using-filter" class = "hash-link" aria-label = "Direct link to Receive messages using filter" title = "Direct link to Receive messages using filter" > < / a > < / h2 >
2025-10-03 05:55:52 +00:00
< p > To display messages in our application, we need to use the < code > useFilterMessages()< / code > function to create a < a href = "/build/javascript/light-send-receive/#receive-messages-using-filter" > Filter subscription< / a > , receive incoming messages, and render them in our interface:< / p >
2025-08-13 03:24:27 +00:00
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > src/App.jsx< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > useFilterMessages < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/react" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function maybe-class-name" style = "color:rgb(80, 250, 123)" > App< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Receive messages from Filter subscription< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < span class = "token literal-property property" > messages< / span > < span class = "token operator" > :< / span > < span class = "token plain" > filterMessages < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > useFilterMessages< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > decoder < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Render the list of messages< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > useEffect< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 24
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "retrieve-messages-using-store" > Retrieve messages using store< a href = "#retrieve-messages-using-store" class = "hash-link" aria-label = "Direct link to Retrieve messages using store" title = "Direct link to Retrieve messages using store" > < / a > < / h2 >
2025-10-03 05:55:52 +00:00
< p > To display messages from the past, we need to retrieve them from the < a href = "/build/javascript/store-retrieve-messages" > Store protocol< / a > using the < code > useStoreMessages()< / code > function when our application initialises and then render them alongside newly received messages:< / p >
2025-08-13 03:24:27 +00:00
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > src/App.jsx< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > useFilterMessages< / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token imports" > useStoreMessages < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/react" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function maybe-class-name" style = "color:rgb(80, 250, 123)" > App< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Query Store peers for past messages< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < span class = "token literal-property property" > messages< / span > < span class = "token operator" > :< / span > < span class = "token plain" > storeMessages < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > useStoreMessages< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > decoder < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Receive messages from Filter subscription< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147 , 249 ) ; font-st
< p > You can also configure a specific Store peer when creating the node, which is useful when running your own Store node or using a specific node in the network:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > node < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > await< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > createLightNode< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > defaultBootstrap< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token boolean" > true< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > store< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > peer< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " /ip4/1.2.3.4/tcp/1234/p2p/16Uiu2HAm..." < / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // multiaddr or PeerId of your Store node< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < / div > < / div >
< p > If the specified Store peer is not available, the node will fall back to using random Store peers in the network.< / p >
2025-10-03 05:55:52 +00:00
< div class = "theme-admonition theme-admonition-info alert--info admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M7.33334 11.3333H8.66668V7.33331H7.33334V11.3333ZM8.00001 5.99998C8.1889 5.99998 8.34734 5.93598 8.47534 5.80798C8.60334 5.67998 8.66712 5.52176 8.66668 5.33331C8.66668 5.14442 8.60268 4.98598 8.47468 4.85798C8.34668 4.72998 8.18845 4.6662 8.00001 4.66665C7.81112 4.66665 7.65268 4.73065 7.52468 4.85865C7.39668 4.98665 7.3329 5.14487 7.33334 5.33331C7.33334 5.5222 7.39734 5.68065 7.52534 5.80865C7.65334 5.93665 7.81157 6.00042 8.00001 5.99998ZM8.00001 14.6666C7.07779 14.6666 6.21112 14.4915 5.40001 14.1413C4.5889 13.7911 3.88334 13.3162 3.28334 12.7166C2.68334 12.1166 2.20845 11.4111 1.85868 10.6C1.5089 9.78887 1.33379 8.9222 1.33334 7.99998C1.33334 7.07776 1.50845 6.21109 1.85868 5.39998C2.2089 4.58887 2.68379 3.88331 3.28334 3.28331C3.88334 2.68331 4.5889 2.20842 5.40001 1.85865C6.21112 1.50887 7.07779 1.33376 8.00001 1.33331C8.92223 1.33331 9.7889 1.50842 10.6 1.85865C11.4111 2.20887 12.1167 2.68376 12.7167 3.28331C13.3167 3.88331 13.7918 4.58887 14.142 5.39998C14.4922 6.21109 14.6671 7.07776 14.6667 7.99998C14.6667 8.9222 14.4916 9.78887 14.1413 10.6C13.7911 11.4111 13.3162 12.1166 12.7167 12.7166C12.1167 13.3166 11.4111 13.7918 10.6 14.142C9.7889 14.4922 8.92223 14.6671 8.00001 14.6666ZM8.00001 13.3333C9.4889 13.3333 10.75 12.8166 11.7833 11.7833C12.8167 10.75 13.3333 9.48887 13.3333 7.99998C13.3333 6.51109 12.8167 5.24998 11.7833 4.21665C10.75 3.18331 9.4889 2.66665 8.00001 2.66665C6.51112 2.66665 5.25001 3.18331 4.21668 4.21665C3.18334 5.24998 2.66668 6.51109 2.66668 7.99998C2.66668 9.48887 3.18334 10.75 4.21668 11.7833C5.25001 12.8166 6.51112 13.3333 8.00001 13.3333Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > info< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > To explore the available Store query options, have a look at the < a href = "/build/javascript/store-retrieve-messages#store-query-options" > Retrieve Messages Using Store Protocol< / a > guide.< / p > < / span > < / div > < / div >
< div class = "theme-admonition theme-admonition-tip alert--success admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" xmlns = "http://www.w3.org/2000/svg" > < path d = "M8 14.6666C7.63333 14.6666 7.31933 14.536 7.058 14.2746C6.79667 14.0133 6.66622 13.6995 6.66667 13.3333H9.33333C9.33333 13.7 9.20267 14.014 8.94133 14.2753C8.68 14.5366 8.36622 14.6671 8 14.6666ZM5.33333 12.6666V11.3333H10.6667V12.6666H5.33333ZM5.5 10.6666C4.73333 10.2111 4.12489 9.59998 3.67467 8.83331C3.22445 8.06665 2.99956 7.23331 3 6.33331C3 4.94442 3.48622 3.76376 4.45867 2.79131C5.43111 1.81887 6.61156 1.33287 8 1.33331C9.38889 1.33331 10.5696 1.81954 11.542 2.79198C12.5144 3.76442 13.0004 4.94487 13 6.33331C13 7.23331 12.7751 8.06665 12.3253 8.83331C11.8756 9.59998 11.2671 10.2111 10.5 10.6666H5.5ZM5.9 9.33331H10.1C10.6 8.97776 10.9862 8.53887 11.2587 8.01665C11.5311 7.49442 11.6671 6.93331 11.6667 6.33331C11.6667 5.31109 11.3111 4.44442 10.6 3.73331C9.88889 3.0222 9.02222 2.66665 8 2.66665C6.97778 2.66665 6.11111 3.0222 5.4 3.73331C4.68889 4.44442 4.33333 5.31109 4.33333 6.33331C4.33333 6.93331 4.46956 7.49442 4.742 8.01665C5.01444 8.53887 5.40045 8.97776 5.9 9.33331Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > tip< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > You have successfully integrated < code > @waku/sdk< / code > into a React application using the < code > @waku/react< / code > package. Have a look at the < a href = "https://github.com/waku-org/js-waku-examples/tree/master/examples/web-chat" target = "_blank" rel = "noopener noreferrer" > web-chat< / a > example for a working demo and the < a href = "https://blog.waku.org/2024-01-22-tictactoe-tutorial/" target = "_blank" rel = "noopener noreferrer" > Building a Tic-Tac-Toe Game with Waku< / a > tutorial to learn more.< / p > < / span > < / div > < / div > < / div > < footer class = "theme-doc-footer docusaurus-mt-lg" > < div class = "row margin-top--sm theme-doc-footer-edit-meta-row" > < div class = "col" > < a href = "https://github.com/waku-org/docs.waku.org/tree/develop/docs/build/javascript/use-waku-react.md" target = "_blank" rel = "noreferrer noopener" class = "theme-edit-this-page" > < div class = "icon_S7Kx m_thRi" > < svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "none" viewBox = "0 0 16 16" > < path fill = "#fff" fill-rule = "evenodd" d = "m12.707 2.393.9.9c.526.52.526 1.367 0 1.887L4.787 14H2v-2.787l6.933-6.94 1.887-1.88c.52-.52 1.367-.52 1.887 0M3.333 12.667l.94.04 6.547-6.554-.94-.94-6.547 6.547z" clip-rule = "evenodd" > < / path > < / svg > < / div > < span class = "lsd-typography lsd-typography--body2" > Edit this page< / span > < / a > < / div > < div class = "col lastUpdated_JAkA" > < / div > < / div > < / footer > < / article > < nav class = "docusaurus-mt-lg pagination-nav" aria-label = "Docs pages" > < a class = "pagination-nav__link pagination-nav__link--prev" href = "/build/javascript/message-encryption" > < div class = "icon_S7Kx m_thRi" > < svg xmlns = "http://www.w3.org/2000/svg" width = "14" height = "14" fill = "none" viewBox = "0 0 14 14" > < path fill = "#fff" d = "M11.667 6.417h-7.1L7.83 3.156 7 2.333 2.334 7 7 11.667l.823-.823-3.255-3.26h7.099z" > < / path > < / svg > < / div > < span class = "lsd-typography lsd-typography--body2 pagination-nav__label" > Encrypt, Decrypt, and Sign Your Messages< / span > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = "/build/javascript/use-waku-create-app" > < span class = "lsd-typography lsd-typography--body2 pagination-nav__label" > Scaffold DApps Using @waku/create-app< / span > < div class = "icon_S7Kx m_thRi" > < svg xmlns = "http://www.w3.org/2000/svg" width = "14" height = "14" fill = "none" viewBox = "0 0 14 14" > < path fill = "#fff" d = "m7 2.334-.823.822 3.255 3.26H2.333v1.167h7.1l-3.256 3.261.823.823L11.667 7z" > < / path > < / svg > < / div > < / a > < / nav > < / div > < / div > < div class = "gap1_XuuQ" > < / div > < / div > < / div > < / main > < / div > < / div > < / div > < footer class = "footer" > < div class = "container container-fluid firstRow_ar1q" > < div class = "footer__bottom text--center" > < div class = "margin-bottom--sm" > < a class = "footerLogoLink_BH7S" href = "/" > < img src = "/theme/image/logo.svg" alt = "Waku" class = "themedImage_k
2024-02-20 09:23:32 +00:00
< / body >
< / html >
