diff --git a/example/src/Overview/index.tsx b/example/src/Overview/index.tsx
index 9219fe38..f7ca917f 100644
--- a/example/src/Overview/index.tsx
+++ b/example/src/Overview/index.tsx
@@ -193,6 +193,7 @@ const OverviewFlow = () => {
onEdgeMouseLeave={onEdgeMouseLeave}
onEdgeDoubleClick={onEdgeDoubleClick}
fitViewOnInit
+ attributionPosition="top-right"
>
diff --git a/src/components/Attribution/index.tsx b/src/components/Attribution/index.tsx
new file mode 100644
index 00000000..e65abc4e
--- /dev/null
+++ b/src/components/Attribution/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import cc from 'classcat';
+
+import { AttributionPosition, ProOptions } from '../../types';
+
+type AttributionProps = {
+ pro?: ProOptions;
+ position?: AttributionPosition;
+};
+
+function Attribution({ pro, position = 'bottom-right' }: AttributionProps) {
+ if (pro?.account === 'paid-subscription' && pro?.hideAttribution) {
+ return null;
+ }
+
+ const positionClasses = `${position}`.split('-');
+
+ return (
+
+ );
+}
+
+export default Attribution;
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index b6100292..ef961b53 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -17,6 +17,7 @@ import OutputNode from '../../components/Nodes/OutputNode';
import { createNodeTypes } from '../NodeRenderer/utils';
import SelectionListener from '../../components/SelectionListener';
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
+import Attribution from '../../components/Attribution';
import { createEdgeTypes } from '../EdgeRenderer/utils';
import Wrapper from './Wrapper';
import {
@@ -40,6 +41,8 @@ import {
NodeChange,
EdgeChange,
OnPaneReady,
+ ProOptions,
+ AttributionPosition,
} from '../../types';
import '../../style.css';
@@ -135,6 +138,8 @@ export interface ReactFlowProps extends Omit, 'on
noPanClassName?: string;
fitViewOnInit?: boolean;
connectOnClick?: boolean;
+ attributionPosition?: AttributionPosition;
+ pro?: ProOptions;
}
export type ReactFlowRefType = HTMLDivElement;
@@ -223,6 +228,8 @@ const ReactFlow: FunctionComponent = forwardRef = forwardRef
{onSelectionChange && }
{children}
+
);
diff --git a/src/style.css b/src/style.css
index 30290001..a5f8ef98 100644
--- a/src/style.css
+++ b/src/style.css
@@ -144,8 +144,8 @@
.react-flow__controls {
position: absolute;
z-index: 5;
- bottom: 10px;
- left: 10px;
+ bottom: 20px;
+ left: 15px;
&-button {
width: 24px;
@@ -161,6 +161,41 @@
.react-flow__minimap {
position: absolute;
z-index: 5;
- bottom: 10px;
- right: 10px;
+ bottom: 20px;
+ right: 15px;
+}
+
+.react-flow__attribution {
+ font-size: 10px;
+ position: absolute;
+ z-index: 1000;
+ background: rgba(255, 255, 255, 0.5);
+ padding: 2px 3px;
+ color: #999;
+
+ a {
+ color: #555;
+ text-decoration: none;
+ }
+
+ &.top {
+ top: 0;
+ }
+
+ &.bottom {
+ bottom: 0;
+ }
+
+ &.left {
+ left: 0;
+ }
+
+ &.right {
+ right: 0;
+ }
+
+ &.center {
+ left: 50%;
+ transform: translateX(-50%);
+ }
}
diff --git a/src/types/general.ts b/src/types/general.ts
index 6a9ef9dd..686f259e 100644
--- a/src/types/general.ts
+++ b/src/types/general.ts
@@ -210,3 +210,16 @@ export type OnSelectionChangeParams = {
};
export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
+
+export type AttributionPosition =
+ | 'top-left'
+ | 'top-center'
+ | 'top-right'
+ | 'bottom-left'
+ | 'bottom-center'
+ | 'bottom-right';
+
+export type ProOptions = {
+ account: string;
+ hideAttribution: boolean;
+};