I have attempted to integrate brythum gantt into a fresh create-react-app project , and I am finding the documentation a little disappointing. For example the documentation says nothing about importing the css , also nothing on importing the project model into ganttConfig.js and there are typos in the react hooks section .
Just a quick question , why are you using hooks in the advanced demo? I am struggling to get hooks to work with the minimal demo , any tips or tricks that might help me ? I don't have too much experience using hooks yet, but I want to start using them. If I don't use hooks and rather class components, will I later run into issues/difficulties Implementing the panel ?
I really want to use hooks for their benefits , I was just wondering if there was specific/major reason you guys are using them on the advanced demo. I tried modifying your minimal example to use hooks , but I am finding it difficult. And the documentation for integration is still a bit of a problem , even the demo code on class components is not doing what I was expecting it to do.
here is my attempt to make hooks work with your minimal demo.
import { useEffect } from "react";
//import BryntumGantt from "../BryntumGantt.js";
import ganttConfig from "../gantt/ganttConfig";
import { Gantt } from "bryntum-gantt";
const Timeline = props => {
const gantt = new Gantt(ganttConfig);
useEffect(() => {
//gantt.render("container");
}, []);
return null;
};
export default Timeline;
Do you perhaps have a minimal using hooks on hand ?
I am trying to build a minimal starting point using hooks , so that I can later implement something similar to the advanced example later on. But I have no idea what is going in the react-shared folder in the examples , so I want a clean starting point if that makes sense.
And I know you guys are working to change the examples https://github.com/bryntum/support/issues/108 , perhaps you can explain the shared folder in the examples to me ? or give me a time estimation on when the examples will be improved ?
I have read the react integration docs multiple times. Just to be clear I was very skeptical about the react integration section , because the code there has typos and did not seem to be working correctly , so I assumed that It might be garbage and did not take it seriously . I thought that trying to blend the advanced example into the minimal example might be a better option , so I was trying to do that.
But I just decided to give the code in the integration docs another shot and It is looking much better now, When I use the following code :
Just a note , I think that if you have your documentation and examples done in very different styles , you will confuse inexperienced react developers.
Examples are given there to show you different use cases. You can run any of them and make sure they work. Then adjust it to your needs, play around the code and even copy to your folder and use as a starting point in creating your own application. Basically each example requires 3 things, you can find them here for example Gantt/examples/react/javascript/basic/package.json:
1. bryntum library. We call this package 'bryntum-gantt'
2. bryntum additional sources required by our examples. We call this package 'bryntum-resources'. It contains some css, icons, fonts, etc
3. bryntum react wrapper. We call it 'bryntum-react-shared'. It's a React implementation of the Gantt. It uses Gantt vanilla code inside and provide React way of interacting with the Gantt API.
So to create your application you just need to make sure you copied those 3 things (outside of the React application folder) and specify correct paths to those sources. Then run 'npm install' and you're able to use them in your application.
Please start from one of our examples and try to implement what you need. If you get stuck, please zip up your code and attach here, so we have a runnable context to look at.
_shared folder is one place from where all examples use wrappers. Section "Copy React wrappers to the project tree" of the Integration guide explains that you can just take files and copy them into your project if you want.
The screenshot shows that you probably need height:100vh; on the Gantt container.