I cant find documentation. Help?

[georginaso]

I didn't find documentation itself, but with the Storybook (and the source) was enough: https://mrblenny.github.io/react-flow-chart

[lordsfantasy]

Yeah, I figured it out! But for advanced customization like the PICKEL showcased here: https://github.com/MrBlenny/react-flow-chart documentation would be really helpful. I couldn't figure out how they'd built the pickle styled cards. Any thoughts?

[georginaso]

You should use the "Components" props in the FlowChart, and use custom components for the Node and NodeInner.

e.g.

<FlowChart
            chart={chart}
            Components={{
              Node: NodeCustom,
              NodeInner: NodeInnerCustom,
            }}
          />

You can find it in the storybook in the "Custom Components" --> "Node Inner" & "Node" examples.

[georginaso]

@lordsfantasy

import React from "react";
import styled, { css } from "styled-components";

const TestStep = styled.div`
  display: grid;
  background: white;
  width: 200px;
  ${(props) =>
    props.isSelected &&
    css`
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      margin-top: -2px;
    `};
`;

const StepTitle = styled.h2`
  padding: 10px;
  color: black;
  border-bottom: 1px gray solid;
`;

const StepContent = styled.p`
  padding: 10px;
  color: black;
`;

export const NodeCustom = React.forwardRef(
  ({ node, children, ...otherProps }, ref) => {
    return (
      <TestStep ref={ref} {...otherProps}>
        <StepTitle>Title</StepTitle>
        <StepContent>Content content content content</StepContent>
      </TestStep>
    );
  }
);