https://github.com/nutboltu/react-focus-scroll

A react component which focuses sections while scrolling. For demo visit here https://nutboltu.github.io/react-focus-scroll
https://github.com/nutboltu/react-focus-scroll

focus onfocus onscroll react

Last synced: 6 months ago
JSON representation

A react component which focuses sections while scrolling. For demo visit here https://nutboltu.github.io/react-focus-scroll

• Host: GitHub
• URL: https://github.com/nutboltu/react-focus-scroll
• Owner: nutboltu
• License: mit
• Created: 2018-12-15T22:15:00.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T10:23:36.000Z (over 2 years ago)
• Last Synced: 2024-05-02T05:55:54.624Z (over 1 year ago)
• Topics: focus, onfocus, onscroll, react
• Language: TypeScript
• Homepage:
• Size: 3.36 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Focus on Scroll

[![dependencies Status](https://david-dm.org/nutboltu/react-focus-scroll/status.svg)](https://david-dm.org/nutboltu/react-focus-scroll)  [![Build Status](https://travis-ci.org/nutboltu/react-focus-scroll.svg?branch=master)](https://travis-ci.org/nutboltu/react-focus-scroll) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

A react component which focuses sections while scrolling

See [Demo and Documentation](https://nutboltu.github.io/react-focus-scroll).

## Props

The component takes the followin props.

| Prop              | Type       | Description |

|-------------------|------------|-------------|

| `className`         | string  | Additional classnames for the component |

| `focusOn`  | string  | Initial focused section|

| `onFocus`        | _function_ | Callback function to invoke when a section is focues The function should contain one parameter(focusIndex). |

## Installation

```bash

npm install react-focus-scroll --save

```

## Usage

```javascript

import FocusOnScroll from "react-focus-scroll";

  
This is first section

  
This is second section


```

## License

MIT Licensed. Copyright (c) Farhad Yasir 2019.