# react-section

> Marking dom element

Latest version **1.1.11** (published 2018-08-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-section
pnpm add react-section
yarn add react-section
bun add react-section
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.11 |
| Published | 2018-08-09 |
| First published | 2018-07-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Hiep Phung |
| Maintainers | charlie-phung |
| Keywords | react, section, flag, lazy, load, lazy load, react load, react section, react flag, react marking, react lazy load |

## Links

- npm: https://www.npmjs.com/package/react-section
- Repository: https://github.com/charliephung/react-section
- Homepage: https://github.com/charliephung/react-section#readme
- Issues: https://github.com/charliephung/react-section/issues
- npm.io page: https://npm.io/package/react-section

## Dependencies (1)

- [react-scroll](https://npm.io/package/react-scroll.md) ^1.7.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.11 (latest) — 2018-08-09
- 1.1.10 — 2018-08-09
- 1.1.9 — 2018-08-09
- 1.1.8 — 2018-08-09
- 1.1.7 — 2018-08-08
- 1.1.6 — 2018-08-07
- 1.1.5 — 2018-08-07
- 1.1.4 — 2018-08-06
- 1.1.3 — 2018-08-05
- 1.1.2 — 2018-08-05
- 1.1.1 — 2018-08-05
- 1.1.0 — 2018-08-05
- 1.0.7 — 2018-08-04
- 1.0.6 — 2018-07-26
- 1.0.5 — 2018-07-26
- … 5 more at https://npm.io/package/react-section/versions

## README

# react-section

> npm -i react-section

[Live_Demo](https://charliephung.github.io/react-section-demo/)

[Live-Demo-Code](https://github.com/charliephung/react-section-demo/blob/master/README.md)

### Marking dom element mostly use for getting element position and offsets, scroll to element or implement lazy loading

---

### All functions and props

```javascript
 componentDidMount() {
    console.log(this.section);
    this.section.getFlagsOffSet()
    this.section.getFlagsPosition()
    this.section.flagsNode
    this.section.flagsRef
    this.section.inViewFlag
    this.section.scrollToFlag()
}
```

#### Scroll to section

```javascript
class App extends Component {
  constructor(props) {
    super(props);
    this.section = React.createRef();
  }

  onClick = flag => {
    this.section.scrollToFlag(flag);
  };
  render() {
    return (
      <Section onRef={ref => (this.section = ref)}>
        <button onClick={() => this.onClick("header")}>Go to header</button>
        <button onClick={() => this.onClick("body")}>Go to body</button>
        <Section.Flag
          style={{ height: "30vh", marginTop: "60px" }}
          flagName="header"
        >
          <h1>Header</h1>
        </Section.Flag>
        <Section.Flag className="body" flagName="body">
          <h1>Body</h1>
        </Section.Flag>
      </Section>
    );
  }
}
```

**scrollToFlag** = (flagName, top = 0, duration = 500) => {..}

flagName: Name of marking flag is required  
top: Offset from top default is 0  
duration: Duration default is 500

---

### Lazyload

```javascript
<Section onRef={ref => (this.section = ref)}>
  <!-- Flag will not accept children is lazyLoad props is provided -->
  <Section.Flag
    lazyLoad={{
      // Loaded delay time
      delay: 2000,
      // initProps apply to Flag not the loading component
      initProps: {
        className: "beforeload",
        style: {
          backgroundColor: "green"
        }
      },
      // Props component will receivie after it is loaded
      loadedProps: { onClick: () => alert("Hi i'm lazy 1") }
      loading: () => <h1>I will load after 2s</h1>,
      loaded: () => import("./component/Loaded"),
  }}
    flagName="lazyheader"
    className="component__lazy"
  />
  <Section.Flag
    lazyLoad={{
      // Again these props apply to the Flag not the component
      // and will be remove after component is loaded
      initProps: {
        className: "beforeload",
        style: {
          backgroundColor: "green"
        }
      },
      // Component will be loaded when appear in to viewport
      loadOnView: true,
      // Component will be loaded when scroll down 200px from it
      fromBottom: 200,
      loadedProps: {
          onClick: () => alert("Hi i'm lazy 2")
      }
      loading: () => <h1>Scroll down 200px from me to load</h1>,
      loaded: () => import("./component/Loaded2"),
    }}
    flagName="lazyheader2"
    className="component__lazy"
  />
</Section>
```

### Peer dependencies: "react-scroll": "^1.7.10"

---
_Source: https://npm.io/package/react-section · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._