How to use react-stickynode - 10 common examples

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

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Vizzuality / trase / frontend / scripts / react-components / profile / profile-components / summary / country-summary.component.jsx View on Github external
{({ status }) => (
              <div
                className={cx({
                  'summary-sticky-group': true,
                  sticky: status === Sticky.STATUS_FIXED
                })}
              >
                <SummaryTitle
                  sticky={status === Sticky.STATUS_FIXED}
                  name={countryName}
                  activity={activity}
                  openModal={openModal}
                />
                <TitleGroup
                  sticky={status === Sticky.STATUS_FIXED}
                  titles={titles}
                  on={newYear => onChange('year', newYear)}
                />
                {status !== Sticky.STATUS_FIXED &&
                  headerAttributes &&
                  Object.keys(headerAttributes).length > 0 &&
                  Object.keys(headerAttributes).some(k => headerAttributes[k].value !== null) && (
                    <div className="small-12">
                      {Object.keys(headerAttributes).map(indicatorKey => (
                        <Fragment key={indicatorKey}>{renderIndicator(indicatorKey)}</Fragment>
                      ))}
                    </div>
                  )}
              </div>
            )}
          </Sticky>
github Vizzuality / trase / frontend / scripts / react-components / profile / profile-components / summary / place-summary.component.jsx View on Github external
{({ status }) => (
              <div
                className={cx({
                  'summary-sticky-group': true,
                  sticky: status === Sticky.STATUS_FIXED
                })}
              >
                <SummaryTitle
                  sticky={status === Sticky.STATUS_FIXED}
                  name={jurisdictionName}
                  openModal={openModal}
                />
                <TitleGroup sticky={status === Sticky.STATUS_FIXED} titles={titles} on={onChange} />
              </div>
            )}
          </Sticky>
github ooloth / gatsbytutorials.com / src / components / Directory.tsx View on Github external
{(status: StickyNodeStatus) => (
            <SearchBar sticky={status.status === Sticky.STATUS_FIXED}>
              <Inner sticky={status.status === Sticky.STATUS_FIXED}>
                <Form>
                  <Label>
                    <Text>Search:</Text>
                    <Input
                      ref={searchInput}
                      value={query}
                      onChange={handleQuery}
                      type="text"
                      placeholder="Type here..."
                    />
                  </Label>
                </Form>

                <MobileMenu
                  formats={formats}
github Vizzuality / trase / frontend / scripts / react-components / profile / profile-components / summary / actor-summary.component.jsx View on Github external
{({ status }) => (
                <div
                  className={cx({
                    'summary-sticky-group': true,
                    sticky: status === Sticky.STATUS_FIXED
                  })}
                >
                  <SummaryTitle
                    sticky={status === Sticky.STATUS_FIXED}
                    name={nodeName}
                    openModal={openModal}
                  />
                  <TitleGroup
                    sticky={status === Sticky.STATUS_FIXED}
                    titles={titles}
                    on={onChange}
                  />

                  {status !== Sticky.STATUS_FIXED &&
                    headerAttributes &&
                    Object.keys(headerAttributes).length > 0 &&
github opencollective / opencollective-frontend / src / components / MenuBar.js View on Github external
handleChange = status => {
    this.setState({ sticky: status.status === Sticky.STATUS_FIXED });
  };
github Vizzuality / trase / frontend / scripts / react-components / profile / profile-components / summary / country-summary.component.jsx View on Github external
{({ status }) => (
              <div
                className={cx({
                  'summary-sticky-group': true,
                  sticky: status === Sticky.STATUS_FIXED
                })}
              >
                <SummaryTitle
                  sticky={status === Sticky.STATUS_FIXED}
                  name={countryName}
                  activity={activity}
                  openModal={openModal}
                />
                <TitleGroup
                  sticky={status === Sticky.STATUS_FIXED}
                  titles={titles}
                  on={newYear => onChange('year', newYear)}
                />
                {status !== Sticky.STATUS_FIXED &&
                  headerAttributes &&
                  Object.keys(headerAttributes).length > 0 &&
github ooloth / gatsbytutorials.com / src / components / Directory.tsx View on Github external
{(status: StickyNodeStatus) => (
            <SearchBar sticky={status.status === Sticky.STATUS_FIXED}>
              <Inner sticky={status.status === Sticky.STATUS_FIXED}>
                <Form>
                  <Label>
                    <Text>Search:</Text>
                    <Input
                      ref={searchInput}
                      value={query}
                      onChange={handleQuery}
                      type="text"
                      placeholder="Type here..."
                    />
                  </Label>
                </Form>

                <MobileMenu
                  formats={formats}
                  topics={topics}
github Vizzuality / trase / frontend / scripts / react-components / profile / profile-components / summary / actor-summary.component.jsx View on Github external
{({ status }) => (
                <div
                  className={cx({
                    'summary-sticky-group': true,
                    sticky: status === Sticky.STATUS_FIXED
                  })}
                >
                  <SummaryTitle
                    sticky={status === Sticky.STATUS_FIXED}
                    name={nodeName}
                    openModal={openModal}
                  />
                  <TitleGroup
                    sticky={status === Sticky.STATUS_FIXED}
                    titles={titles}
                    on={onChange}
                  />

                  {status !== Sticky.STATUS_FIXED &&
                    headerAttributes &&
                    Object.keys(headerAttributes).length > 0 &&
                    Object.keys(headerAttributes).some(k => headerAttributes[k].value !== null) && (
                      <div className="small-12">
                        {Object.keys(headerAttributes).map(indicatorKey => (
                          <Fragment key={indicatorKey}>{renderIndicator(indicatorKey)}</Fragment>
                        ))}
                      </div>
                    )}
                </div>
              )}
github Vizzuality / trase / frontend / scripts / react-components / profile / profile-components / summary / place-summary.component.jsx View on Github external
{({ status }) => (
              <div
                className={cx({
                  'summary-sticky-group': true,
                  sticky: status === Sticky.STATUS_FIXED
                })}
              >
                <SummaryTitle
                  sticky={status === Sticky.STATUS_FIXED}
                  name={jurisdictionName}
                  openModal={openModal}
                />
                <TitleGroup sticky={status === Sticky.STATUS_FIXED} titles={titles} on={onChange} />
              </div>
            )}
          </Sticky>
github opencollective / opencollective-frontend / components / MenuBar.js View on Github external
handleChange = status => {
    this.setState({ sticky: status.status === Sticky.STATUS_FIXED });
  };

react-stickynode

A performant and comprehensive React sticky component

BSD-3-Clause
Latest version published 5 months ago

Package Health Score

83 / 100
Full package analysis

Popular react-stickynode functions