react-timeroller - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/time-roller.js

@@ -117,4 +117,6 @@ 'use strict';
       overflowY: "scroll",
-      width: "66.666%",
-      scrollbarWidth: "none"
+      width: unit ? "66.666%" : "100%",
+      scrollbarWidth: "none",
+      listStyle: 'none',
+      paddingLeft: 0
     },
@@ -132,6 +134,7 @@ scrollLi: {
       justifyContent: "center",
-      color: "#9C9C9C"
+      color: "#9C9C9C",
+      border: "solid 1px red"
     },
     unit: {
-      width: "33.333%",
+      width: unit ? "33.333%" : "0%",
       color: "#626262"
@@ -151,3 +154,3 @@ },
     }, value);
-  })), /*#__PURE__*/React__default["default"].createElement("p", {
+  })), unit && /*#__PURE__*/React__default["default"].createElement("p", {
     style: styles.unit
@@ -154,0 +157,0 @@ }, unit));

package.json

 {
   "name": "react-timeroller",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A React Component that allows you to implement a 'briefcase-like' number picker wheel in your project",
@@ -5,0 +5,0 @@ "main": "dist/time-roller.js",

README.md

@@ -8,3 +8,2 @@ # TimeRoller
 - [Installation](#installation)
-- [Usage](#usage)
 - [Props](#props)
@@ -23,31 +22,2 @@ - [Example](#example)
 
-## Usage
-
-Import the `TimeRoller` component and use it in your React application:
-
-```jsx
-import React, { useState } from 'react';
-import TimeRoller from 'react-timeroller';
-
-function App() {
-  const [selectedValue, setSelectedValue] = useState(2);
-  const range = [1, 2, 3, 4, 5];
-
-  return (
-    <div className="App">
-      <h1>Time Roller Demo</h1>
-      <TimeRoller
-        range={range}
-        unit="hours"
-        selectedValue={selectedValue}
-        setSelectedValue={setSelectedValue}
-      />
-      <p>Selected value: {selectedValue}</p>
-    </div>
-  );
-}
-
-export default App;
-```
-
 ## Props
@@ -59,5 +29,5 @@
 
-### `unit` (required)
+### `unit` (optional)
 - Type: `string`
-- Description: A string representing the unit of the values (e.g., "hours", "minutes").
+- Description: A string label representing the unit of the values (e.g., "hours", "minutes").
 
@@ -101,2 +71,4 @@ ### `selectedValue` (required)
 
+![Starter code output](./starter.gif)
+
 ## Contributing
@@ -103,0 +75,0 @@

src/TimeRoller.js

@@ -59,4 +59,6 @@ import React, { useEffect, useRef } from "react";
       overflowY: "scroll",
-      width: "66.666%",
+      width: unit ? "66.666%" : "100%",
       scrollbarWidth: "none",
+      listStyle: 'none',
+      paddingLeft: 0,
     },
@@ -67,2 +69,3 @@ scrollLi: {
       listStyleType: "none",
+
     },
@@ -76,5 +79,6 @@ scrollLi2: {
       color: "#9C9C9C",
+      border: "solid 1px red",
     },
     unit: {
-      width: "33.333%",
+      width: unit ? "33.333%" : "0%",
       color: "#626262",
@@ -108,3 +112,3 @@ },
       </ul>
-      <p style={styles.unit}>{unit}</p>
+      {unit && <p style={styles.unit}>{unit}</p>}
     </div>
@@ -111,0 +115,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

135156

1056.46%

Number of package files

7

16.67%

Lines of code

276

2.22%

Worsened metrics

Number of lines in readme file

77

-26.67%

No dependency changes