https://github.com/siibragimov/react-sticky-to-parent
React and Next compatible sticky block component
https://github.com/siibragimov/react-sticky-to-parent
parallax react sticky sticky-elements sticky-footer sticky-header sticky-menu sticky-navbar sticky-navigation-bar sticky-scroll sticky-sidebar sticky-smooth sticky-to-parent typescript
Last synced: 2 months ago
JSON representation
React and Next compatible sticky block component
- Host: GitHub
- URL: https://github.com/siibragimov/react-sticky-to-parent
- Owner: siibragimov
- License: mit
- Created: 2024-07-12T15:47:20.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-07-18T19:38:14.000Z (10 months ago)
- Last Synced: 2025-02-28T05:55:19.289Z (3 months ago)
- Topics: parallax, react, sticky, sticky-elements, sticky-footer, sticky-header, sticky-menu, sticky-navbar, sticky-navigation-bar, sticky-scroll, sticky-sidebar, sticky-smooth, sticky-to-parent, typescript
- Language: TypeScript
- Homepage:
- Size: 1.98 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React compatible sticky block component
Makes block sticky to it's parent block. To see how it works, please, see the demo.
[](https://badge.fury.io/js/react-sticky-to-parent)
[](https://github.com/siibragimov/react-sticky-to-parent/actions/workflows/npm-publish-github-packages.yml)
[](https://github.com/siibragimov/react-sticky-to-parent/actions/workflows/npm-publish.yml)
[](https://bundlephobia.com/package/react-sticky-to-parent)
## Installation and setup
### 1. Install component:
If you want to install package from __npmjs registry__(recommended) use:
```shell
npm i react-sticky-to-parent
```
```shell
yarn add react-sticky-to-parent
```
```shell
pnpm add react-sticky-to-parent
```
If you want to install package from __GitHub packages__ use:
```shell
npm install @siibragimov/react-sticky-to-parent
```
**Note**: Don't forget to configure registry for installing packages from GitHub. Use __.npmrc__ file or use command:
```shell
npm config set registry https://npm.pkg.github.com/
```
### 2. Import CSS.
For React:
```javascript
// in entry point (main.tsx)
import '../node_modules/react-sticky-to-parent/dist/react-sticky-to-parent.css';
```
**Note**: If you have problems with import, check the file path and especially the prefix.
### 3. Define styles for block(Sidebar) container. See the [`App.tsx`](/src/App.tsx).
**Note**: the `.container` should have full height of the column, component sticks to it and moves _"inside"_ it.
### 4. Import component in your code:
```javascript
import { ReactStickyToParent } from 'react-sticky-to-parent'
```
### 5. Wrap content you want to be sticky.
Define `ref` for the parent container and pass it to `react-sticky-to-parent` component props.
```javascript
const container = useRef(null);
```
Example:
```javascript
```
## Contributing
To run in development mode
```shell
npm run dev
```
Use for build component
```shell
npm run build
```
and follow the instruction in console to open the test page.
To generate types you can use:
```shell
npm run types
```