docs(site): getting started text
This commit is contained in:
@@ -149,22 +149,34 @@ const Home = () => {
|
|||||||
<Paragraph my={3} color={baseColors.textLight}>
|
<Paragraph my={3} color={baseColors.textLight}>
|
||||||
A flow consists of nodes and edges (or just nodes). Together we call
|
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
|
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
|
ReactFlow component. A simple flow could look like this:
|
||||||
flow could look like this:
|
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
<CodeBlock
|
<CodeBlock
|
||||||
code={`import React from 'react';
|
code={`import React from 'react';
|
||||||
import ReactFlow from 'react-flow-renderer';
|
import ReactFlow from 'react-flow-renderer';
|
||||||
|
|
||||||
const elements = [
|
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
|
// you can also pass a React Node as a label
|
||||||
{ id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
|
{ id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
|
||||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
{ 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>
|
</CenterContent>
|
||||||
</ContentSection>
|
</ContentSection>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user