docs(site): getting started text

This commit is contained in:
moklick
2020-10-06 11:50:27 +02:00
parent c469957c58
commit 49906ddda8
+16 -4
View File
@@ -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>