docs(site): getting started text
This commit is contained in:
@@ -149,22 +149,34 @@ const Home = () => {
|
||||
<Paragraph my={3} color={baseColors.textLight}>
|
||||
A flow consists of nodes and edges (or just nodes). Together we call
|
||||
them elements. You can pass a set of elements as a prop to the
|
||||
ReactFlow component. This is the most basic for a flow. A simple
|
||||
flow could look like this:
|
||||
ReactFlow component. A simple flow could look like this:
|
||||
</Paragraph>
|
||||
<CodeBlock
|
||||
code={`import React from 'react';
|
||||
import ReactFlow from 'react-flow-renderer';
|
||||
|
||||
const elements = [
|
||||
{ id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
|
||||
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
|
||||
// you can also pass a React Node as a label
|
||||
{ id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||
];
|
||||
|
||||
const BasicFlow = () => <ReactFlow elements={elements} />;`}
|
||||
export default () => <ReactFlow elements={elements} />;`}
|
||||
/>
|
||||
<Paragraph mt={3} color={baseColors.textLight}>
|
||||
You can find a detailed{' '}
|
||||
<Link to="/docs/getting-started/">entry point</Link> in the docs or
|
||||
read our{' '}
|
||||
<a
|
||||
href="https://webkid.io/blog/react-flow-node-based-graph-library/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
blog post
|
||||
</a>{' '}
|
||||
to get started.
|
||||
</Paragraph>
|
||||
</CenterContent>
|
||||
</ContentSection>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user