Making a breadcrumb navigation component and posted to npm

Npm records to produce their own components from a zero process. This npm package is a breadcrumb navigation components, npm package called React-Breadcrumb-Navigation, React use in the project. Packet address npm , GitHub .

Its idea is:

1. The main parameters

The user opens a new page, the page path (obtained from history.location), title (ie user developer / user flexibility to customize the module), and other custom attributes to join the session history buffer;

parameter	description
path	Page path, can be used for navigation Jump
title	Customizable display page title
history	Use history management session history

2. indexDB memory session history

You can use the browser client store to store session history. Since not only the storage path, title, etc. strings, but also to store a snapshot of the page, so localStorage does not meet the requirements of storage capacity, so use indexDB. ZangoDB is a indexDB interfaces, it may be used to connect the operation indexDB database.

3. Generate a snapshot of the page

The user leaves a page when the page generates a snapshot for this purpose. I used html2canvas this library can be converted to HTML browser canvas pictures.

Before the user leaves the page on the current page generation canvas, and then use html2canvas be converted into images (or Blob Blob can then be converted to base64), and the final path of the page, title to the session stored with the historical database. Snapshot page is displayed behind when the picture is displayed directly on it.

Began to develop

Take the following React mapping knowledge to do a demo, as this development breadcrumbs assembly environment. Each node on the graph is a page.

In the end, we used to develop complete package made out of breadcrumbs page:

1. The development environment to build

webpack Configuration

Use webpack to build the package, webpack configuration into webpack.dev.config.jsand webpack.pro.config.jsformer for development and debugging, so you would use webpack-dev-server, etc., which is used to publish the final package npm package. About webpack configuration does not go into details here, you can go see the github repository. Configuration webpack.pro.config.jsNote that, because the package is packaged npm, import module according to the configuration, the configuration module to import mode commonjs2, so we can project import or import ES6 use require assembly of:

 output:{
        filename:'[name].bundle.js',
        path: path.resolve(__dirname,'lib'),
        library:'react-breadcrumb-nav',
        libraryTarget:'commonjs2'
    },
复制代码

The preparation of each page file

In the top-level project to create a new test directory for storing demo file, in this file index.js is webpack.dev.config.jspackaged entrance. Another index.html mount components, as well as a series of page file.

Introduced later to be developed component breadcrumbs on every page ReactBreadcrumbNavigation, such as a React Home page:

React-router using the routing database to organize all pages:

/routes_catalogue.js:

2. Start Development Kit

In the top layer a new project file src, breadcrumbs assembly for storing the source code.

Wherein, store.js create / indexDB database connection, and defines a method of CRUD. I used a custom Hooks to define the database components.

src/index.jsIs the entry Files component, it calls the method defined for the database, automatically add the current session history when entering a new page, delete the history of any one node function, when entering a new page will call html2canvasfor the current page is generated snapshots, while calling historyget the page since title defined path, together with the user stored in the database, thus adding a session history. Further, the use of paging breading component, show only a small amount of the title navigation (left shows the number of user-defined component), and therefore implemented using a paging function useReducer.

src/index.js：

3. Packaging components

In the development process used webpack.dev.config.jsto build an application. After completion of component development, the use of webpack.pro.config.jspackaging components can be. Configuration package.json:

"main": "lib/main.bundle.js",
"jsnext:main": "src/index.js",
复制代码

4. Publish to npm

First log npm

npm adduser
复制代码

Npm enter their user name and password, mailbox information. Then npm publish to publish.

If you feel good, more articles can go to my github page

Reproduced in: https: //juejin.im/post/5d09c7095188257c6f229e6d