Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove React dependency #1

Open
3 tasks
haxiomic opened this issue Oct 29, 2018 · 2 comments
Open
3 tasks

Remove React dependency #1

haxiomic opened this issue Oct 29, 2018 · 2 comments
Labels
enhancement New feature or request

Comments

@haxiomic
Copy link
Collaborator

haxiomic commented Oct 29, 2018

Currently React is required to use the browser, however it's only needed for the headers which could be done via plain-old html

It would be nice to remove the React dependency to simplify the experience for users

This also requires removing the material-ui dependency

  • Remove material-ui dependency
  • Implement existing react content as plain-old-html
  • Make it easy to embed genome browser in a react project
@haxiomic haxiomic added the enhancement New feature or request label Dec 1, 2018
@hitz
Copy link

hitz commented Dec 18, 2018

I was just about to make a ticket about embedding genome browser in a react project. I was just looking for a how-to but maybe you have to remove the dependency first?

@haxiomic
Copy link
Collaborator Author

haxiomic commented Dec 18, 2018

Hey @hitz, you can use it in a react project by calling reactRender(props: {width, height}) which produces a react element. For example, to use it with JSX you can do something like:

constructor() {
	this.hpgv = new GenomeVisualizer(configuration);
}


render() {
    return (
    	<div>
        	{this.hpgv.reactRender({ width: this.state.viewerWidth, height: this.state.viewerHeight})}
        </div>
    );
}

There's two builds of hpgv in dist/, one with the react dependency embedded and the other without

If you've already got react included in your project, then use the valis-hpgv.react-peer.js build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants