Skip to content

helper for create-react-web, decorator for react-redux, react-router-dom withRouter, ssr fetchData

License

Notifications You must be signed in to change notification settings

skyFi/react-web-helper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-web-helper

Usage

only redux connect

// before import React from 'react'; import { connect } from 'react-redux'; class Example extends React.Component { //... } export default connect(/*mapStateToProps, etc.*/)(Example); // after import React from 'react'; import { reduxConnect } from 'react-web-helper'; @reduxConnect(/*mapStateToProps, etc.*/) class Example extends React.Component { //... } export default Example;

react-router 4.x withRouter + redux

// before import React from 'react'; import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; class Example extends React.Component { //... } export default withRouter(connect(/*mapStateToProps, etc.*/)(Example)); // after import React from 'react'; import { reduxConnect, withRouter } from 'react-web-helper'; @withRouter() @reduxConnect(/*mapStateToProps, etc.*/) class Example extends React.Component { //... } export default Example;

fetchData for SSR

// simple import React from 'react'; import { fetchData } from 'react-web-helper'; @fetchData() class Example extends React.Component { // fetchData will exec in server side or componentDidMount func static async fetchData({ dispatch, match }) { await dispatch(someAction()); // ... } // ... } export default Example; // with react router 4.x and redux import React from 'react'; import { reduxConnect, withRouter, fetchData } from 'react-web-helper'; @fetchData(/*notPreventFirstFetchOnBroswer*/) @withRouter() @reduxConnect(/*mapStateToProps, etc.*/) class Example extends React.Component { //... } export default Example;
  • @params {boolean} notPreventFirstFetchOnBroswer

not frevent first load fetchData on broswer, default value is false.

helmet for smart set page header, eg: title, keywords, description, etc.

import React from "react"; import { Helmet } from "react-web-helper"; class Application extends React.Component { render () { return ( <div className="application"> <Helmet> <meta charSet="utf-8" /> <title>My Title</title> <link rel="canonical" href="http://mysite.com/example" /> </Helmet> ... </div> ); } };

helmet more doc.

About

helper for create-react-web, decorator for react-redux, react-router-dom withRouter, ssr fetchData

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published