Skip to content

jhony-v/react-sticky-puzzle

Repository files navigation

REACT-STICKY-PUZZLE

Library to place the items you want on top in a sticky sequential way.

Demo

Installation

$ npm i react-sticky-puzzle
$ yarn add react-sticky-puzzle

Overview code

An easy way to integrate.

import React from "react";
import ReactStickyPuzzle, { StickyPuzzleItem } from "react-sticky-puzzle";

function App() {
  return (
    <ReactStickyPuzzle>
      <StickyPuzzleItem styleSticky={{
        backgroundColor: "red"
      }}>
       ...
      </StickyPuzzleItem>
      <StickyPuzzleItem>
       ...
      </StickyPuzzleItem>
    </ReactStickyPuzzle>
  );
}

export default App;

Adapt component to scroll container

import ReactStickyPuzzle, { StickyPuzzleItem } from "react-sticky-puzzle";

function App() {
  return (
    <div style={{
        width:"300px",
        height:"400px",
        overflowY: "scroll",
        background:"rgba(200,200,255)",
        margin:"auto"
      }}>
      <ReactStickyPuzzle inElement>
        <StickyPuzzleItem>
        ...
        </StickyPuzzleItem>
        <StickyPuzzleItem>
        ...
        </StickyPuzzleItem>
      </ReactStickyPuzzle>
    </div>
  );
}

export default App;

ReactStickyPuzzle

This component is the main one to encapsulate all the child components. Components that are inside a StickyPuzzle component will be affected in order to have a position in the header.

property description type
onFixed Emit an event when an item is in fixed position event
inElement Adapt container to element with scroll boolean

StickyPuzzleItem

Component that will be affected by being inside the* ReactStickyPuzzle* component. These components will be positioned in the header firmly one below the other. You can customize the styles to your way when you are in fixed position on header.

property description type
styleSticky Set style to component when the position is sticky style

About

React library for sticky positioning of blocks on stop sequence.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published