Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@twreporter/universal-header

Package Overview
Dependencies
Maintainers
5
Versions
342
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@twreporter/universal-header - npm Package Compare versions

Comparing version 2.0.5 to 2.1.0

CHANGELOG.md

65

package.json
{
"name": "@twreporter/universal-header",
"version": "2.0.5",
"version": "2.1.0",
"description": "Universal header of TWReporter sites",
"main": "dist/index.js",
"main": "lib/index.js",
"scripts": {
"lint": "eslint -c .eslintrc src",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npm run lint && make build"
"build": "make build",
"dev": "make dev"
},
"repository": {
"type": "git",
"url": "git+https://github.com/twreporter/universal-header.git"
},
"repository": "https://github.com/twreporter/twreporter-npm-packages.git",
"author": "twreporter <developer@twreporter.org>",
"keywords": [

@@ -20,62 +17,18 @@ "twreporter",

],
"author": "developers@twreporter.org",
"license": "MIT",
"bugs": {
"url": "https://github.com/twreporter/universal-header/issues"
},
"homepage": "https://github.com/twreporter/universal-header#readme",
"peerDependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"styled-components": "^4.0.0"
},
"dependencies": {
"axios": "^0.18.0",
"@twreporter/core": "^1.1.0",
"@twreporter/redux": "^5.0.4",
"lodash": "^4.17.11",
"lodash.get": "^4.4.2",
"prop-types": "^15.6.2",
"querystring": "^0.2.0",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-transition-group": "^1.2.1",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.7",
"redux-thunk": "^2.3.0",
"smoothscroll": "^0.4.0",
"styled-components": "^4.0.0"
},
"devDependencies": {
"@babel/cli": "^7.1.5",
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.4",
"babel-plugin-inline-react-svg": "^1.0.1",
"babel-plugin-styled-components": "^1.8.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"eslint": "^5.9.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-react": "^7.11.1",
"pre-commit": "^1.2.2",
"rimraf": "^2.6.2",
"webpack": "^3.0.0"
},
"pre-commit": [
"lint"
],
"files": [
"/dist/actions",
"/dist/components",
"/dist/constants",
"/dist/containers",
"/dist/contexts",
"/dist/index.js",
"/dist/reducers",
"/dist/standalone-header.js",
"/dist/store.js",
"/dist/utils"
"lib"
]
}
# TWReporter Universal Header
Universal header(UH) is aimed to provide the consistent user experience
Universal header(UH) is aimed to provide the consistent user experience
whicherver twreporter sites the users visit.
Universal header has two different ways to render both on client side
Universal header has two different ways to render both on client side
and server side.
For client side rendering, we call it *STANDALONE* header, which is
For client side rendering, we call it _STANDALONE_ header, which is
along with redux store, requesting authentication and authorization after
`componentDidMount` on the page.
For server side rendering, we call it *DEPENDENT* header, which is a
For server side rendering, we call it _DEPENDENT_ header, which is a
container component(see https://redux.js.org/basics/usage-with-react for information).
Because the *DEPENDENT* header is a container component, the redux store
needs to be prepared by clients.
Because the _DEPENDENT_ header is a container component, the redux store
needs to be prepared by clients.

@@ -21,10 +22,13 @@ See the following example codes to understand how to use UH in different

### Dependencies of UH
Make sure you have the following dependencies installed.
- react@^16.3.0 (Required)
- styled-components@^4.0.0 (Required)
- react-router-dom@^4.0.0 (Required by *DEPENDENT* header)
- react-redux@^6.0.0 (Required by *DEPENDENT* header)
- redux and redux-thunk (Required by *DEPENDENT* header)
- react-router-dom@^4.0.0 (Required by _DEPENDENT_ header)
- react-redux@^6.0.0 (Required by _DEPENDENT_ header)
- redux and redux-thunk (Required by _DEPENDENT_ header)
### Standalone Header
To use standalone header is easy, see the following example.

@@ -42,5 +46,3 @@

<React.Fragment>
<StandaloneHeader
releaseBranch={releaseBranch}
/>
<StandaloneHeader releaseBranch={releaseBranch} />
</React.Fragment>

@@ -53,8 +55,9 @@ )

### Dependent Header
Dependent header is more complicated to setup than standalone header.
There are three parts(reducer, store and server side data dispatching)
There are three parts(reducer, store and server side data dispatching)
need to be configured by clients.
```javascript
// src/reducers/index.js of clients
// src/reducers/index.js of clients
import authReducer from '@twreporter/universal-header/dist/reducers/auth'

@@ -73,3 +76,3 @@ import { combineReducers } from 'redux'

import reducer from './reducers/index'
import thunkMiddleware from 'redux-thunk'
import thunkMiddleware from 'redux-thunk'
import { createStore, applyMiddleware } from 'redux'

@@ -108,3 +111,3 @@

<Provider store={store}>
<HeaderConatiner
<HeaderConatiner
releaseBranch={releaseBranch}

@@ -145,5 +148,5 @@ isLinkExternal={false}

const releaseBranch = process.env.RELEASE_BRANCH
const isLinkExternal = false
const isLinkExternal = false
ReactDOM.hydrate((
ReactDOM.hydrate(
<Provider store={reduxStore}>

@@ -154,9 +157,11 @@ <HeaderContainer

/>
</Provider>
), document.getElementById('app'))
</Provider>,
document.getElementById('app')
)
```
### isLinkExternal, releaseBranch and theme
#### isLinkExternal
`isLinkExternal` is a bool.

@@ -167,6 +172,7 @@

If `isLinkExternal={true}`, all the links in the header would be `href`s,
If `isLinkExternal={true}`, all the links in the header would be `href`s,
handled by normal `<a>` HTML tag.
#### releaseBranch
Currently, `releaseBranch` works with `isLinkExternal={true}`.

@@ -177,3 +183,3 @@

and each would generate corresponding links.
EX:
EX:
If you pass `releaseBranch="master"`, then the logo link would be `http://localhost:3000`.

@@ -186,2 +192,3 @@ If you pass `releaseBranch="test"`, then the logo link would be `http://localhost:3000`.

#### theme
You can pass `theme` prop into standalone and dependent header to have different styles.

@@ -217,4 +224,6 @@ So far, `theme` supports the following values, including `normal`, `index`, `photography` and `transparent`.

#### TODO for theme customization
So far, the clients can not customize `fontColor`, `backgroundColor` and `logo` by themeselves.
However, we could support `theme` either to be string or to be an object like the following spec.
```javascript

@@ -226,2 +235,1 @@ @typedef {Object} theme

```
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc