How to use the react-static.useRouteData function in react-static

To help you get started, we’ve selected a few react-static examples, based on popular ways it is used in public projects.

github 1productaweek / webframe / src / pages / categories.js View on Github external
export default function Categories () {
  const { categories } = useRouteData()
  const { CACHE_URL } = useSiteData()
  
  return (
    <Layout>
      <Seo title='Categories' />
      <h2>Categories</h2>
      <div css={css`margin-top: 1em;`}>
        <Row gutter={2}>
          {(categories || []).map(cat => (
            <Col gutter={2} col={12} sm={4} mb={2} key={cat.id}>
              <ImageListItem
                title={cat.name}
                src={cat.screen ? `${CACHE_URL}/1200x/${cat.screen.src}` : ''}
                to={`/categories/${cat.id}`}
              />
            </Col>
github neo-one-suite / neo-one / packages / neo-one-website / src / pages / docs.tsx View on Github external
export default () => {
  const props = useRouteData<DocsProps>();

  return (
    <>
      <Helmet title="NEO•ONE Docs" />
      <Suspense fallback={<DocsLoading />}>
        <ContentLayout path="docs">
          <Docs {...props} />
        </ContentLayout>
      </Suspense>
    </>
  );
};
github 1productaweek / webframe / src / containers / Screens.js View on Github external
function Screens () {
  const { parentTitle, parentPath, title, screens } = useRouteData()
  const hasScreens = screens && screens.length
  return (
    <Layout>
      {parentTitle && <Link css={css`display: inline-block; margin-right: 10px;`} to={parentPath}><h2>{ parentTitle }</h2></Link>}
      {parentTitle && <h2 css={css`display: inline-block; margin-right: 10px; color: #aaa;`}> / </h2>}
      {title && <h2 css={css`display: inline-block;`}>{ title }</h2>}
      <div css={css`margin-top: 1em;`}>
        {hasScreens ? <List items={screens} /> : <p>No screens found!</p>}
      </div>
    </Layout>
  )
}
github react-static / react-static / packages / react-static / templates / basic / src / pages / blog.js View on Github external
export default function Blog() {
  const { posts } = useRouteData()
  return (
    <div>
      <h1>It's blog time.</h1>
      <div>
        <a href="#bottom" id="top">
          Scroll to bottom!
        </a>
      </div>
      <br />
      All Posts:
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/blog/post/${post.id}/`}>{post.title}</Link>
          </li>
        ))}
github neo-one-suite / neo-one / packages / neo-one-website / src / pages / tutorial.tsx View on Github external
export default () => {
  const props = useRouteData<TutorialProps>();

  return (
    <>
      <Helmet title="Tutorial: Intro to NEO•ONE - NEO•ONE" />
      <Suspense fallback={<TutorialLoading />}>
        <ContentLayout path="tutorial">
          <Tutorial {...props} />
        </ContentLayout>
      </Suspense>
    </>
  );
};
github neo-one-suite / neo-one / packages / neo-one-website / src / pages / reference.tsx View on Github external
export default () => {
  const props = useRouteData<ReferenceProps>();

  return (
    <>
      <Helmet title="NEO•ONE Reference" />
      <Suspense fallback={<DocsLoading />}>
        <ContentLayout path="reference">
          <Reference {...props} />
        </ContentLayout>
      </Suspense>
    </>
  );
};
github react-static / react-static / packages / react-static / templates / basic / src / containers / Post.js View on Github external
export default function Post() {
  const { post } = useRouteData()
  return (
    <div>
      <Link to="/blog/">{'<'} Back</Link>
      <br />
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>
  )
}
github 1productaweek / webframe / src / pages / products.js View on Github external
export default function Categories () {
  const { products } = useRouteData()
  return (
    <Layout>
      <Seo title='Products' />
      <h2>Products</h2>
      <div css={css`margin-top: 1em;`}>
        <Row gutter={2}>
          {(products || []).map(prod => (
            <Col gutter={2} col={12} sm={4} mb={2} key={prod.id}>
              <ImageListItem
                title={prod.name}
                src={prod.screen && prod.screen.src} 
                to={`/products/${prod.id}`}
              />
            </Col>
          ))}
        </Row>
github neo-one-suite / neo-one / packages / neo-one-website / src / pages / blog.tsx View on Github external
export default () => {
  const props = useRouteData<BlogProps>();

  return (
    <>
      <Helmet title="NEO•ONE Blog" />
      <Suspense fallback={<BlogLoading />}>
        <ContentLayout path="blog">
          <Blog {...props} />
        </ContentLayout>
      </Suspense>
    </>
  );
};
github neo-one-suite / neo-one / packages / neo-one-website / src / pages / blogAll.tsx View on Github external
export default () => {
  const props = useRouteData<BlogAllProps>();

  return (
    <>
      <Suspense fallback={<BlogLoading />}>
        <Helmet title="NEO•ONE Blog" />
        <MainLayout path="blog">
          <BlogAll {...props} />
        </MainLayout>
      </Suspense>
    </>
  );
};