53_remove_attribution

Remove Attribution

This example demonstrates how you can remove the React Flow attribution from the renderer.

If you’re considering removing the attribution, we’d first like to mention:

If you’re using React Flow at your organization and making money from it, we rely on your support to keep React Flow developed and maintained under an MIT License. Before you remove the attribution, see the ways you can support React Flow to keep it running.

Are you using React Flow for a personal project? Great! Go ahead and remove the attribution. You can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github. If you start making money using React Flow or use it in an organization in the future, we would ask that you re-add the attribution or sign up for one of our subscriptions.

Thank you for supporting us ✌🏻

the xyflow team

Example: learn/remove-attribution

App.jsx

import { ReactFlow, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { nodes, edges } from './initialElements';
 
/**
 * This example demonstrates how you can remove the attribution from the React Flow renderer.
 * Please only hide the attribution if you are subscribed to React Flow Pro: https://reactflow.dev/pro
 */
const proOptions = { hideAttribution: true };
 
function RemoveAttributionExample() {
  return (
    <ReactFlow
      defaultNodes={nodes}
      defaultEdges={edges}
      fitView
      proOptions={proOptions}
      nodesDraggable
      colorMode="system"
    >
      <Background />
    </ReactFlow>
  );
}
 
export default RemoveAttributionExample;

index.css

html,
body {
  margin: 0;
  font-family: sans-serif;
}
 
#app {
  width: 100vw;
  height: 100vh;
}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Flow Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.jsx"></script>
  </body>
</html>

index.jsx

import { createRoot } from 'react-dom/client';
import App from './App';
 
import './index.css';
 
const container = document.querySelector('#app');
const root = createRoot(container);
 
root.render(<App />);

initialElements.js

const nodeStyle = {
  color: '#0041d0',
  borderColor: '#0041d0',
};
 
export const nodes = [
  {
    type: 'input',
    id: '1',
    data: { label: 'Thanks' },
    position: { x: 100, y: 0 },
    style: nodeStyle,
  },
  {
    id: '2',
    data: { label: 'for' },
    position: { x: 0, y: 100 },
    style: nodeStyle,
  },
  {
    id: '3',
    data: { label: 'using' },
    position: { x: 200, y: 100 },
    style: nodeStyle,
  },
  {
    id: '4',
    data: { label: 'React Flow Pro!' },
    position: { x: 100, y: 200 },
    style: nodeStyle,
  },
];
 
export const edges = [
  {
    id: '1->2',
    source: '1',
    target: '2',
    animated: true,
  },
  {
    id: '1->3',
    source: '1',
    target: '3',
    animated: true,
  },
  {
    id: '2->4',
    source: '2',
    target: '4',
    animated: true,
  },
  {
    id: '3->4',
    source: '3',
    target: '4',
    animated: true,
  },
];

Quartz 4

Explorer