https://github.com/ccencisoj/react-absoluted

react-absolute is a react wrapper that works like a combination of position absolute and fixed
https://github.com/ccencisoj/react-absoluted

absolute absoluted fixed react wrapper

Last synced: about 1 month ago
JSON representation

react-absolute is a react wrapper that works like a combination of position absolute and fixed

• Host: GitHub
• URL: https://github.com/ccencisoj/react-absoluted
• Owner: ccencisoj
• Created: 2022-11-18T18:22:23.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-23T01:44:50.000Z (over 3 years ago)
• Last Synced: 2025-10-28T19:33:43.527Z (8 months ago)
• Topics: absolute, absoluted, fixed, react, wrapper
• Language: JavaScript
• Homepage:
• Size: 2.72 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React-Absoluted

react-absolute is a react wrapper that **works like a combination of position absolute and fixed**

Elements with position absolute:

- They generate scroll when the size is greater than the viewport

- They are fixed in the defined position with respect to the parent

Elements with position fixed:

- They do not generate scroll when the size is greater than the viewport

- They are fixed in the defined position with respect to the viewport

This wrapper is fixed in the defined position with respect to the parent and does not generate a scroll when the size is greater than the viewport.

## Getting started

```shell

npm install react-absolute

```

Import Absoluted

```jsx

import Absoluted from 'react-absoluted';

// ...

```

Wrap the elementos

```jsx

  

```

## Example

**To understand the example look at the scroll**

Image with position absolute.

![Bubble 1](https://github.com/ccencisoj/react-absoluted/blob/main/docs/images/bubble1.gif)

Image with position fixed

![Bubble 2](https://github.com/ccencisoj/react-absoluted/blob/main/docs/images/bubble2.gif)

Image wrapped with Absoluted

!["Bubble 3"](https://github.com/ccencisoj/react-absoluted/blob/main/docs/images/bubble3.gif)