@maxweek/react-scroller - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "@maxweek/react-scroller",
-  "private": false,
   "description": "Make your blocks scrolling easy, with a custom scroll-bar, based on native browser scroll",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
@@ -7,0 +6,0 @@ "author": "Max Nedelko",

README.md

@@ -1,30 +0,64 @@
-# React + TypeScript + Vite
+# React-scroller
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Make your blocks scrolling easy, with a custom scroll-bar, based on native browser scroll
 
-Currently, two official plugins are available:
+## How to install
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```ts
+npm i @maxweek/react-scroller
+```
 
-## Expanding the ESLint configuration
+## Usage
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```ts
+import Scroller from "@maxweek/react-scroller";
 
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+<Scroller
+  needBar={true}
+  barAltPosition={false}
+  horizontal={false}
+  grab={true}
+  borderFade={true}
+  borderPadding={true}
+  grabCursor={true}
+  className={'your-scroller-class'}
+  barClassName={'your-scroller-bar-class'}
+  barRollerClassName={'your-scroller-bar-roller-class'}
+  contentClassName={'your-scroller-content-class'}
+>
+  {/* Your content */}
+</Scroller>
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Props
+
+<table>
+  <thead>
+    <tr>
+      <th>PropName</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td>children</td><td>ReactNode</td><td></td><td>React child</td></tr>
+    <tr><td>needBar?</td><td>boolean</td><td>false</td><td>enables scrollbar</td></tr>
+    <tr><td>barAltPosition?</td><td>boolean</td><td>false</td><td>changes scrollbar position, default at right - changes to left, when horizontal enabled - changes bottom to top</td></tr>
+    <tr><td>horizontal?</td><td>boolean</td><td>false</td><td>makes your box scrolling horizontal</td></tr>
+    <tr><td>grab?</td><td>boolean</td><td>false</td><td>enables grabbing your scroll content</td></tr>
+    <tr><td>borderFade?</td><td>boolean</td><td>false</td><td>add fadding in directions of scroll by masking</td></tr>
+    <tr><td>borderPadding?</td><td>boolean</td><td>false</td><td>add padding in directions of scroll</td></tr>
+    <tr><td>grabCursor?</td><td>boolean</td><td>false</td><td>enables grab cursor on hover</td></tr>
+    <tr><td>className?</td><td>string</td><td>false</td><td>class for scroller box</td></tr>
+    <tr><td>barClassName?</td><td>string</td><td>false</td><td>class for scrollbar</td></tr>
+    <tr><td>barRollerClassName?</td><td>string</td><td>false</td><td>class for scrollbar roller</td></tr>
+    <tr><td>contentClassName?</td><td>string</td><td>false</td><td>class for content wrapper</td></tr>
+  </tbody>
+</table>
+
+### License
+- React Scroll is licensed under the MIT License. Explore this to understand terms and conditions of the license- https://opensource.org/licenses/MIT
+
+Thank you for using my package!
+Max Nedelko

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

64

increased by106.45%

Number of low supply chain risk alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

26975

decreased by-47.56%

Number of package files

8

decreased by-11.11%

Lines of code

116

decreased by-86.17%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes