signavio / react-stick Goto Github PK

View Code? Open in Web Editor NEW

64.0 12.0 6.0 22.04 MB

React component to stick a portaled node to an anchor node

Home Page: https://react-stick.now.sh

License: MIT License

JavaScript 0.40% Shell 0.26% TypeScript 98.85% HTML 0.49%

react stick portal ui-design ui-components

react-stick's Introduction

react-stick

Stick is a component that allows to attach an absolutely positioned node to a statically positioned anchor element. Per default, the node will be rendered in a portal as a direct child of the body element.

npm install --save react-stick

import Stick from 'react-stick'

<Stick node={<p>The stick node</p>} position="bottom center" align="top center">
  <p>The anchor node</p>
</Stick>

Props

prop name	type	description
`children`	node	The content of the anchor element
`node`	node	The node to stick to the anchor element
`position`	one of: `"bottom left"`, `"bottom center"`, `"bottom right"`, `"middle left"`, `"middle center"`, `"middle right"`, `"top left"`, `"top center"`, `"top right"` (default value: `"bottom left"`)	The reference point on the anchor element at which to position the stick node
`align`	one of: `"bottom left"`, `"bottom center"`, `"bottom right"`, `"middle left"`, `"middle center"`, `"middle right"`, `"top left"`, `"top center"`, `"top right"` (default value depends on the `position`)	The alignment of the stick node. You can also think of this as the reference point on the stick node that is placed on the `position` reference point of the anchor node. For example `position="top left" align="bottom right"` means "put the bottom right point of the stick not onto the top left point of the anchor node".
`sameWidth`	boolean	If set to `true`, the container of the stick node will have the same width as the anchor node. This enforces a maximum width on the content of the stick node.
`autoFlipVertically`	boolean	If a node has been attached to the bottom but there isn't enough space on the screen it will automatically be positioned to the top.
`autoFlipHorizontally`	boolean	If a node has been attached to the left but there isn't enough space on the screen it will automatically be positioned to the right.
`onClickOutside`	function: (event: Event) => void	A handler that is called on every click on any element outside of the anchor element and the stick node.
`inline`	boolean	If set to `true`, the stick node will not be rendered detached but inside the same container as the anchor node.
`updateOnAnimationFrame`	boolean	If set to `true`, will update the stick node position on every animation frame. Per default, it will only update on idle callback.
`component`	string	Pass any string-type React component that shall be rendered as the wrapper element around the children. Per default, `"div"` is used.

react-stick's People

Contributors

Stargazers

Watchers

Forkers

react-stick's Issues

[rl-reuse_tool-1] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-reuse_tool-1
Explanation: Does README mention REUSE? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

WARN: Encrypted value is using deprecated PKCS1 padding, please change to using PGP encryption.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Warning

Renovate failed to look up the following dependencies: Failed to look up orb package signavio/fortify, Failed to look up orb package signavio/blackduck.

Files affected: .circleci/config.yml

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): pin dependencies (@vitest/coverage-v8, vitest)
chore(deps): update dependency npm to v10.8.2
chore(deps): update dependency ramda to v0.30.1
chore(deps): update dependency @testing-library/cypress to v10
chore(deps): update dependency @vitejs/plugin-react to v4
chore(deps): update dependency codecov to v4
chore(deps): update dependency cypress to v13
chore(deps): update dependency vite-plugin-istanbul to v6
Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

chore(deps): update dependency eslint-plugin-prettier to v5
chore(deps): update dependency semver-regex to v4
chore(deps): update react monorepo to v18 (major) (@types/react, @types/react-dom, react, react-dom)

Detected dependencies

circleci

.circleci/config.yml

fortify 2.0.0

blackduck 1.16.4

codecov 3.3.0

node 20-slim

node 20-slim

node 20-slim

node 20-slim

node 20-slim

node 20-slim

github-actions

.github/workflows/codeql.yml

actions/checkout v4

github/codeql-action v3

github/codeql-action v3

github/codeql-action v3

npm

package.json

@types/invariant ^2.2.35

invariant ^2.2.4

requestidlecallback ^0.3.0

substyle ^9.4.1

@commitlint/cli 19.3.0

@commitlint/config-conventional 19.2.2

@commitlint/prompt-cli 19.3.1

@cypress/code-coverage 3.12.39

@cypress/react 8.0.1

@cypress/vite-dev-server 5.0.7

@testing-library/cypress 8.0.7

@types/react 16.14.60

@types/react-dom 16.9.24

@vitejs/plugin-react 2.2.0

@vitest/coverage-v8 ^1.6.0

condition-circle 2.0.2

core-js 3.37.1

cypress 11.2.0

eslint 8.57.0

eslint-config-prettier 9.1.0

eslint-config-react-app 7.0.1

eslint-plugin-prettier 4.2.1

glamor 2.20.40

husky 9.0.11

lint-staged 15.2.2

prettier 2.8.8

react 16.14.0

react-dom 16.14.0

rimraf 5.0.7

semantic-release 23.0.8

substyle-glamor 4.1.2

typescript 5.4.5

vite 3.2.10

vite-plugin-istanbul 5.0.0

vitest ^1.6.0

react >=16.8.0

react-dom >=16.8.0

node >=16.11

npm >=8.x

ramda 0.29.1

npm 10.5.0

semver 7.6.2

semver-regex 3.1.4

Check this box to trigger a request for Renovate to run again on this repository

Run checkAlignment procedure on first render

Hello, Philipp!

It would be nice to have autoflipping work not only on handleScroll but straight ahead after render. So, sticky element will be fully visible even without scrolling. This will help in sutuations when anchor is placed from the start near the edge of the viewport.

For, example this may be implemented by adding such a piece of code before line 76 in Stick.js:

  useEffect(() => {
    if (!nodeRef.current || !anchorRef.current) {
      return
    }

    checkAlignment(nodeRef.current, anchorRef.current)
  }, [nodeRef.current, anchorRef.current])

Property 'node' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)

I have

                    <Stick
                        node={appState?.modals?.upgradeArrow ?
                            <Image
                                src="/img/animated/arrow-point-up.gif"
                                width={224 / 3}
                                height={296 / 3}
                            />
                            : <></>
                        }
                        updateOnAnimationFrame={true}
                        position="bottom left"
                        align="top right">
                        <Link href="/app/billing" passHref>
                            <Button variant="contained" color="secondary" size="small">
                                Upgrade Now
                            </Button>
                        </Link>
                    </Stick>

the Type error I get is:

Type '{ children: Element; node: Element; updateOnAnimationFrame: boolean; position: string; align: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'node' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)

Issue with React 17

npm install --save react-stick

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/react-stick
npm ERR!   react-stick@"*" from the root project

"Stick node width" section not working as expected

The "Stick node width" section of the react-stick demo page doesn't seem to be working as intended. On smaller screen width the right-most node does not have a text break and on wider screens the line clip doesn't seem to be in accordance to the screen width itself (always has overflow)

Steps to reproduce:

Visit the react-stick demo page - https://react-stick.vercel.app/
Find the "Stick node width" section
Set a small screen width (like 900px)
Confirm that the right-most node does not have a line break and flows off the screen
Set a large screen width (like 1500px)
1. Confirm that the right-most node has a line break but still flows off the screen

Expected behaviour:
Right-most node clips the text to accommodate the screen width

Observed behaviour:
Lines on the node do not clip correctly and flow over the screen width

Node position not updated correctly during scroll [v3 regression]

Since updating from 2.3.0 to 3.0.6, in a certain scenario (re-built in codesandbox link below), I observed the following bug:

A sticky node is not moving correctly with its anchor when scrolling horizontally.
Instead, it always stays in the same (initial) position.

I built a minimal repro example here: https://codesandbox.io/s/adoring-star-lqpti

If I'd have to guess, I think that the calculateWidth function here is not doing what it should, but I am not able to fix the issue myself:

react-stick/src/Stick.js

Line 230 in 689d09b

function calculateWidth(

[rl-vulnerability_alerts-1] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-vulnerability_alerts-1
Explanation: Are vulnerability alerts enabled? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Remove flow-bin from dependencies

For some reason, flow-bin is not in devDependencies but in dependencies.

[rl-reuse_tool-3] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-reuse_tool-3
Explanation: Is it registered in REUSE? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

[rl-reuse_tool-4] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-reuse_tool-4
Explanation: Is it compliant with REUSE rules? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Example page does not work in IE 11

For some reason, the example page is now broken in IE 11. This has an effect on other projects using this library as well. Let's figure out what's wrong there.

Development warnings about unsupported style property

Description

I'm getting console warnings when using version 3.0.2:

index.js:1 Warning: Unsupported style property &align-top. Did you mean &alignTop?

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Failed to decrypt field npmToken. Please re-encrypt and try again.

To improve performance add an option to disable tracking manually

The main idea here is that user may turn on and off tracking if react-stick is placed outside the viewport (with his own technique).

Proposal

Add property disableTracking allowing user to disable tracking if he wish.

Or rename property updateOnAnimationFrame to updateOn with values:

idleCallback (default)
animationFrame
never

Why?

Right now watcher constantly tracks position of the anchor, taking up to 50% CPU performance in idleCallbacks in case of 200 react-stick instances (on my PC). Even if node itself is hidden (null)!

This may be seen straight on demo page. In case sticky node visible CPU usage goes twice higher.

Node version problem

Running yarn install on my fresh repo I encountered a problem with react-stick package

error [email protected]: The engine "node" is incompatible with this module. Expected version ">=16.11". Got "14.20.1"

Nowhere in my package.json do I setup node version requirement

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

[rl-reuse_tool-2] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-reuse_tool-2
Explanation: Does it have LICENSES directory with licenses? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Release automation broken

Looking at https://app.circleci.com/pipelines/github/signavio/react-stick/6657/workflows/b3bedd85-be4c-4234-9953-7589f0ecd42a/jobs/23553/parallel-runs/0/steps/0-106 it seems like something is off with the NPM credentials that are used in the release step. New versions of this package cannot automatically be released which is a bummer :)

Configure z-index

It looks like there's a default z-index of 99 to all instances of react-stick. I need to raise that to a higher z-index in my project. Is there any way to make this configurable?

Example does not look like how it is supposed to look

In our manual regression test suite (a.k.a the demo page) we have a scenario called "Stick node width". It specifies that the sticked node in the example at the very right must line break. However, this is broken and the node thus reaches off screen (effectively introducing a horizontal scrollbar).

I haven't investigated which version introduced the regression yet.

Add an option to disable tracking

Hi @frontendphil

The main idea here is that user may turn on and off tracking if react-stick is placed outside the viewport (with his own preferred technique).

Proposal

Add property disableTracking to allow user disable tracking.

Or, which is worse from compatibility POV, rename property updateOnAnimationFrame to updateOn with values:

idleCallback (default)
animationFrame
never

Why?

Right now watcher constantly tracks position of the anchor, taking up to 50% CPU performance in idleCallbacks in case of 200 react-stick instances (on my PC). Even if node itself is hidden (null)!

This may be seen straight on demo page. In case sticky node visible CPU usage goes twice higher.

CodeSandbox doesn't get along

Noticing we're getting a module not found error in CodeSandbox when trying to demo our project. I'm not sure if they changed something with how they're importing but I can't get react-stick to work at all there.

https://codesandbox.io/s/kind-chatterjee-id2c8?file=/src/App.js

Not sure if this is a react-stick problem at all but figured you should be aware.

signavio / react-stick Goto Github PK

react-stick's Introduction

react-stick

Props

react-stick's People

Contributors

Stargazers

Watchers

Forkers

react-stick's Issues

Repository problems

Rate-Limited

Edited/Blocked

Open

Ignored or Blocked

Detected dependencies

Description

Proposal

Why?

🚨 The automated release from the master branch failed. 🚨

Invalid npm token.

Proposal

Why?

Recommend Projects

Recommend Topics

Recommend Org

Jobs

🚨 The automated release from the `master` branch failed. 🚨