Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-cookie
Advanced tools
react-cookie - npm Package Compare versions
Comparing version 2.0.3 to 2.0.4
| { | ||
| "name": "react-cookie", | ||
| "version": "2.0.3", | ||
| "version": "2.0.4", | ||
| "description": "Universal cookies for React", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
153
README.md
@@ -54,99 +54,104 @@ <h3 align="center"> | ||
| ## Example | ||
| ```js | ||
| // src/components/App.js | ||
| import React, { Component } from 'react'; | ||
| import { instanceOf } from 'prop-types'; | ||
| import { withCookies, Cookies } from 'react-cookie'; | ||
| ## Example | ||
| ```js | ||
| // src/components/App.js | ||
| import React, { Component } from 'react'; | ||
| import { instanceOf } from 'prop-types'; | ||
| import { withCookies, Cookies } from 'react-cookie'; | ||
| import NameForm from './NameForm'; | ||
| import NameForm from './NameForm'; | ||
| class App extends Component { | ||
| static propTypes = { | ||
| cookies: instanceOf(Cookies).isRequired | ||
| }; | ||
| class App extends Component { | ||
| static propTypes = { | ||
| cookies: instanceOf(Cookies).isRequired | ||
| }; | ||
| componentWillMount() { | ||
| const { cookies } = this.props; | ||
| componentWillMount() { | ||
| const { cookies } = this.props; | ||
| this.state = { | ||
| name: cookies.get('name') || 'Ben' | ||
| }; | ||
| } | ||
| this.state = { | ||
| name: cookies.get('name') || 'Ben' | ||
| }; | ||
| } | ||
| handleNameChange(name) { | ||
| const { cookies } = this.props; | ||
| handleNameChange(name) { | ||
| const { cookies } = this.props; | ||
| cookies.set('name', name, { path: '/' }); | ||
| this.setState({ name }); | ||
| } | ||
| cookies.set('name', name, { path: '/' }); | ||
| this.setState({ name }); | ||
| } | ||
| render() { | ||
| const { name } = this.state; | ||
| render() { | ||
| const { name } = this.state; | ||
| return ( | ||
| <div> | ||
| <NameForm name={name} onChange={this.handleNameChange.bind(this)} /> | ||
| {this.state.name && <h1>Hello {this.state.name}!</h1>} | ||
| </div> | ||
| ); | ||
| } | ||
| return ( | ||
| <div> | ||
| <NameForm name={name} onChange={this.handleNameChange.bind(this)} /> | ||
| {this.state.name && <h1>Hello {this.state.name}!</h1>} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| export default withCookies(App); | ||
| export default withCookies(App); | ||
| ``` | ||
| // src/server.js | ||
| import React from 'react'; | ||
| import ReactDOMServer from 'react-dom/server'; | ||
| import { CookiesProvider } from 'react-cookie'; | ||
| ```js | ||
| // src/server.js | ||
| import React from 'react'; | ||
| import ReactDOMServer from 'react-dom/server'; | ||
| import { CookiesProvider } from 'react-cookie'; | ||
| import Html from './components/Html'; | ||
| import App from './components/App'; | ||
| import Html from './components/Html'; | ||
| import App from './components/App'; | ||
| export default function middleware(req, res) { | ||
| const markup = ReactDOMServer.renderToString( | ||
| <CookiesProvider cookies={req.universalCookies}> | ||
| <App /> | ||
| </CookiesProvider> | ||
| ); | ||
| export default function middleware(req, res) { | ||
| const markup = ReactDOMServer.renderToString( | ||
| <CookiesProvider cookies={req.universalCookies}> | ||
| <App /> | ||
| </CookiesProvider> | ||
| ); | ||
| const html = ReactDOMServer.renderToStaticMarkup(<Html markup={markup} />); | ||
| const html = ReactDOMServer.renderToStaticMarkup(<Html markup={markup} />); | ||
| res.send('<!DOCTYPE html>' + html); | ||
| } | ||
| res.send('<!DOCTYPE html>' + html); | ||
| } | ||
| ``` | ||
| // src/client.js | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { CookiesProvider } from 'react-cookie'; | ||
| ```js | ||
| // src/client.js | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { CookiesProvider } from 'react-cookie'; | ||
| import App from './components/App'; | ||
| import App from './components/App'; | ||
| const appEl = document.getElementById('main-app'); | ||
| const appEl = document.getElementById('main-app'); | ||
| ReactDOM.render( | ||
| <CookiesProvider> | ||
| <App /> | ||
| </CookiesProvider>, | ||
| appEl | ||
| ); | ||
| ReactDOM.render( | ||
| <CookiesProvider> | ||
| <App /> | ||
| </CookiesProvider>, | ||
| appEl | ||
| ); | ||
| ``` | ||
| // server.js | ||
| require('babel-register'); | ||
| ```js | ||
| // server.js | ||
| require('babel-register'); | ||
| const express = require('express'); | ||
| const serverMiddleware = require('./src/server').default; | ||
| const cookiesMiddleware = require('universal-cookie-express'); | ||
| const express = require('express'); | ||
| const serverMiddleware = require('./src/server').default; | ||
| const cookiesMiddleware = require('universal-cookie-express'); | ||
| const app = express(); | ||
| const app = express(); | ||
| app | ||
| .use('/assets', express.static('dist')) | ||
| .use(cookiesMiddleware()) | ||
| .use(serverMiddleware); | ||
| app | ||
| .use('/assets', express.static('dist')) | ||
| .use(cookiesMiddleware()) | ||
| .use(serverMiddleware); | ||
| app.listen(8080, function() { | ||
| console.log('Listening on 8080...'); // eslint-disable-line no-console | ||
| }); | ||
| ``` | ||
| app.listen(8080, function() { | ||
| console.log('Listening on 8080...'); // eslint-disable-line no-console | ||
| }); | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by3.29%
157
Worsened metrics
- Total package byte prevSize
- decreased by-1.06%
11139
No dependency changes