Merge pull request #92 from avgupta456/master

lineColor prop
stephane-monnot · Oct 2, 2021 · bf3fb02 · bf3fb02
2 parents f557eae + 5854503
commit bf3fb02
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -133,6 +133,9 @@ Add extra class name to root div element.
 
 Choose if you want `'1-column-left'` or `'1-column-right'` or `'2-columns'` (default: `'2-columns'`).
 
+### `lineColor={ String }`
+
+Choose a color for the timeline (default: `'white'`).
 
 ## VerticalTimelineElement Props
 

diff --git a/src/VerticalTimeline.css b/src/VerticalTimeline.css
@@ -24,7 +24,7 @@
   left: 18px;
   height: 100%;
   width: 4px;
-  background: white;
+  background: var(--line-color);
 }
 
 .vertical-timeline.vertical-timeline--one-column-right::before {

diff --git a/src/VerticalTimeline.js b/src/VerticalTimeline.js
@@ -2,19 +2,28 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const VerticalTimeline = ({ animate, className, layout, children }) => (
-  <div
-    className={classNames(className, 'vertical-timeline', {
-      'vertical-timeline--animate': animate,
-      'vertical-timeline--two-columns': layout === '2-columns',
-      'vertical-timeline--one-column-left':
-        layout === '1-column' || layout === '1-column-left',
-      'vertical-timeline--one-column-right': layout === '1-column-right',
-    })}
-  >
-    {children}
-  </div>
-);
+const VerticalTimeline = ({
+  animate,
+  className,
+  layout,
+  lineColor,
+  children,
+}) => {
+  document.documentElement.style.setProperty('--line-color', lineColor);
+  return (
+    <div
+      className={classNames(className, 'vertical-timeline', {
+        'vertical-timeline--animate': animate,
+        'vertical-timeline--two-columns': layout === '2-columns',
+        'vertical-timeline--one-column-left':
+          layout === '1-column' || layout === '1-column-left',
+        'vertical-timeline--one-column-right': layout === '1-column-right',
+      })}
+    >
+      {children}
+    </div>
+  );
+};
 
 VerticalTimeline.propTypes = {
   children: PropTypes.oneOfType([
@@ -29,12 +38,14 @@ VerticalTimeline.propTypes = {
     '2-columns',
     '1-column-right',
   ]),
+  lineColor: PropTypes.string,
 };
 
 VerticalTimeline.defaultProps = {
   animate: true,
   className: '',
   layout: '2-columns',
+  lineColor: '#FFF',
 };
 
 export default VerticalTimeline;