Dynamic grid creation from code with defaultGuides

packages/react-guides/src/react-guides/Guides.tsx

@@ -25,6 +25,8 @@ export default class Guides extends React.PureComponent<GuidesProps, GuidesState
  onDragEnd: () => {},
  displayDragPos: false,
  dragPosFormat: v => v,
+ defaultGuides: [],
+ showGuides: true,
  };
  public state: GuidesState = {
  guides: [],
@@ -82,11 +84,12 @@ export default class Guides extends React.PureComponent<GuidesProps, GuidesState
  </GuidesElement>;
  }
  public renderGuides() {
- const { type, zoom } = this.props as Required<GuidesProps>;
+ const { type, zoom, showGuides } = this.props as Required<GuidesProps>;
  const translateName = type === "horizontal" ? "translateY" : "translateX";
  const guides = this.state.guides;
 
  this.guideElements = [];
+ if(showGuides){
  return guides.map((pos, i) => {
  return (<div className={prefix("guide", type)}
  ref={refs(this, "guideElements", i)}
@@ -97,6 +100,9 @@ export default class Guides extends React.PureComponent<GuidesProps, GuidesState
  transform: `${translateName}(${pos * zoom}px)`,
  }}></div>);
  });
+ }else{
+ return (<div></div>)
+ }
  }
  public componentDidMount() {
  this.dragger = new Dragger(
@@ -120,10 +126,19 @@ export default class Guides extends React.PureComponent<GuidesProps, GuidesState
  dragend: this.onDragEnd,
  },
  );
+ this.setState({guides: this.props.defaultGuides || []}); // pass array of guides on mount data to create gridlines or something like that in ui 
  }
  public componentWillUnmount() {
  this.dragger.unset();
  }
+ public componentDidUpdate(prevProps: any) {
+ if (prevProps.defaultGuides !== this.props.defaultGuides) {
+ //to dynamically update guides from code rather than dragging guidelines
+ this.setState({guides: this.props.defaultGuides || []},()=>{
+ this.renderGuides();
+ });
+ }
+ }
  /**
  * Load the current guidelines.
  * @memberof Guides

packages/react-guides/src/react-guides/types.ts

@@ -20,6 +20,9 @@ export interface GuideOptions extends RulerProps {
  displayDragPos?: boolean;
  cspNonce?: string;
  dragPosFormat?: (value: number) => string | number;
+ defaultGuides? :number[];
+ showGuides?: boolean;
+
 }
 
 /**