reb

react-embedded-browser

Embedded browser like mobile apps for React and Electron

Showing:

Popularity

Downloads/wk

14

GitHub Stars

8

Maintenance

Last Commit

6yrs ago

Contributors

0

Package

Dependencies

3

Size (min+gzip)

35.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React Embedded Browser Component for Electron

This is a React.js component to provide an embedded browser like mobile apps. This component is assumed to be used in Electron app.

screenshot

Usage

You can try the example in this repository;

Insall as npm package

$ npm install react-embedded-browser

You can use default.css and EmbeddedBrowser component as below:

import React from 'react';
import EmbeddedBrowser from 'react-embedded-browser';

React.render(
    <div>
        <button onClick={show}>push me</button>
        <EmbeddedBrowser />
    </div>,
    document.body
);

And you can open URL with open() method of DOM node of <EmbeddedBrowser/>.

let browser = document.querySelector('.embedded-browser');
browser.open('https://example.com');

Note: Only one embedded browser can exist in the app.

Note: <EmbeddedBrowser> depends on FontAwesome. Please be sure to install it in your project.

Customization

If you only want to change the design of embedded browser, prepare your favorite CSS file and simply use it. You can copy the default.css and modify it.

If you want to arrange the back/forward buttons, external buttons, title and webview, you can use the each components and you can make your own embedded browser as you like. Please use <BackButton>, <ForwardButton>, <PageTitle>, <ExternalButton> and <BrowserBody> as below. Note that each elements don't depend on FontAwesome.

import {BackButton ForwardButton PageTitle ExternalButton BrowserBody} from 'react-embedded-browser';

React.render(
        <div className="my-so-cool-browser">
            <div className="my-so-cool-title-bar">
                <BackButton className="page-back">
                    Back!
                </BackButton>
                <ForwardButton className="page-forward">
                    Forward!
                </ForwardButton>
                <PageTitle className="page-title"/>
                <ExternalButton className="page-external">
                    Open in external browser!
                </ExternalButton>
            </div>
            <BrowserBody className="page-body" ref="body"/>
        </div>,
        document.body
    );

To tell which URL should be open, you can use open() method in <BrowserBody/> DOM node.

License

This repository is licensed under the MIT License.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100