@before.js/client

    4.1.13 • Public • Published

    @before/client

    js-flybondi semantic-release js-semistandard-style code style: prettier

    yarn add @before/client
    yarn add @loadable/component react react-dom react-router-dom

    Basic usage

    // ./src/routes.js
    import { asyncComponent } from '@before/client';
    import loadable from '@loadable/component';
    
    const Placeholder = () => <div>Loading</div>;
    
    const HomeContainerLoader = /* #__LOADABLE__ */ () =>
      import(/* webpackChunkName: "home" */ './pages/HomeContainer/HomeContainer.page');
    
    const routes = [
      {
        path: '/',
        exact: true,
        component: asyncComponent({
          LoadableComponent: loadable(HomeContainerLoader, { fallback: Placeholder }),
          loader: HomeContainerLoader
        })
      }
    ];
    
    export default routes;
    // ./src/client.js
    import React from 'react';
    import routes from './routes';
    import { hydrate } from 'react-dom';
    import { ensureReady, ensureClientReady, Before } from '@before/client';
    
    ensureClientReady(() =>
      ensureReady(routes)
        .then(data => {
          hydrate(
            <BrowserRouter>
              <Before data={data} routes={routes} />
            </BrowserRouter>,
            document.getElementById('root')
          );
        })
      }
    );
    // ./pages/HomeContainer/HomeContainer.page'
    import React, { useCallback } from 'react';
    
    function HomePage({ history, location }) {
      const handleClick = useCallback(() => {
        history.push('/search/page');
      }, [history]);
    
      return (
        <main>
          <header>
            <h1>Home Page</h1>
          </header>
          <article>
            <section>
              <p>Hello actual pathname is {location.pathname}</p>
            </section>
            <a href="" onClick={handleClick}>Go to next page</a>
          </article>
        </main>
      );
    }

    Page props

    Before will pass down the following props to your component plus all your component initial props:

    Name Description
    history Copy of react-router history but with custom push, replace and location properties. The original properties can we access with the unstable_ prefix.
    query Object with the querystring value from the location object if we are in the client or from the request query if we are in the server.
    match A match object contains information about how a matched the URL. More info
    location A location object shaped like { pathname, search, hash, state }

    Install

    npm i @before.js/client

    DownloadsWeekly Downloads

    94

    Version

    4.1.13

    License

    MIT

    Unpacked Size

    417 kB

    Total Files

    29

    Last publish

    Collaborators

    • lfantone
    • flybondi-nelson