Version 0.1 - fork from gaearon/react-document-title

Author: Ambroos Vaes

README.md

@@ -1,28 +1,29 @@
-React Document Title
-====================
+React Nested Status
+===================
 
-Provides a declarative way to specify `document.title` in a single-page app.  
-This component can be used on server side as well.
+A server-side utility component that passes status codes. Useful to set HTTP status codes based on which components are being rendered.
 
 Built with [React Side Effect](https://github.com/gaearon/react-side-effect).
 
+Based (heavily) on [React Document Title](https://github.com/gaearon/react-document-title).
+
 ====================
 
 ## Installation
 
 ```
-npm install --save react-document-title
+npm install --save react-nested-status
 ```
 
 Dependencies: React >= 0.11.0
 
 ## Features
 
+* Made for isomorphic apps. Really doesn't have a use without server-side React.
 * Does not emit DOM, not even a `<noscript>`;
 * Like a normal React compoment, can use its parent's `props` and `state`;
 * Can be defined in many places throughout the application;
 * Supports arbitrary levels of nesting, so you can define app-wide and page-specific titles;
-* Works just as well with isomorphic apps.
 
 ## Example
 
@@ -33,9 +34,9 @@ var App = React.createClass({
   render: function () {
     // Use "My Web App" if no child overrides this
     return (
-      <DocumentTitle title='My Web App'>
+      <NestedStatus code=200>
         <this.props.activeRouteHandler />
-      </DocumentTitle>
+      </NestedStatus>
     );
   }
 });
@@ -44,36 +45,36 @@ var HomePage = React.createClass({
   render: function () {
     // Use "Home" while this component is mounted
     return (
-      <DocumentTitle title='Home'>
+      <NestedStatus code=200>
         <h1>Home, sweet home.</h1>
-      </DocumentTitle>
+      </NestedStatus>
     );
   }
 });
 
-var NewArticlePage = React.createClass({
+var ErrorPage = React.createClass({
   mixins: [LinkStateMixin],
 
   render: function () {
     // Update using value from state while this component is mounted
     return (
-      <DocumentTitle title={this.state.title || 'Untitled'}>
+      <NestedStatus code=404>
         <div>
-          <h1>New Article</h1>
-          <input valueLink={this.linkState('title')} />
+          <h1>Four-oh-four</h1>
+          <p>Page not found.</p>
         </div>
-      </DocumentTitle>
+      </NestedStatus>
     );
   }
 });
 ```
 
 ## Server Usage
 
-If you use it on server, call `DocumentTitle.rewind()` after rendering components to string to retrieve the title given to the innermost `DocumentTitle`. You can then embed this title into HTML page template.
+Call `NestedStatus.rewind()` after rendering components to string to retrieve the status code given to the innermost `NestedStatus`. You can then use this to set your Express (or other web server) status code.
 
 Because this component keeps track of mounted instances, **you have to make sure to call `rewind` on server**, or you'll get a memory leak.
 
-## But What About Meta Tags?
+## Thank you
 
-I want to keep this project simple and [after a discussion](https://github.com/gaearon/react-document-title/issues/5) decided it to be out of scope. The good news is you can implement this yourself using the same code that powers React Document Title: [React Side Effect](https://github.com/gaearon/react-side-effect). If figure out a good API for setting `<meta>`, `<link rel='canonical'>` and similar tags in a nested fashion and use React Side Effect for that, please let me know, so I can link to your project!
+A huge thanks to [gaearon](https://github.com/gaearon) for his open-source [React Document Title](https://github.com/gaearon/react-document-title) that was easy to understand and modify.

index.js

@@ -3,41 +3,36 @@
 var React = require('react'),
     createSideEffect = require('react-side-effect');
 
-var _serverTitle = null;
+var _serverStatus = 200;
 
-function getTitleFromPropsList(propsList) {
+function getStatusFromPropsList(propsList) {
   var innermostProps = propsList[propsList.length - 1];
   if (innermostProps) {
-    return innermostProps.title;
+    return innermostProps.code;
   }
 }
 
-var DocumentTitle = createSideEffect(function handleChange(propsList) {
-  var title = getTitleFromPropsList(propsList);
-
-  if (typeof document !== 'undefined') {
-    document.title = title || '';
-  } else {
-    _serverTitle = title || null;
-  }
+var NestedStatus = createSideEffect(function handleChange(propsList) {
+  var status = getStatusFromPropsList(propsList);
+  _serverStatus = status || 200;
 }, {
-  displayName: 'DocumentTitle',
+  displayName: 'NestedStatus',
 
   propTypes: {
-    title: React.PropTypes.string.isRequired
+    code: React.PropTypes.number.isRequired
   },
 
   statics: {
     peek: function () {
-      return _serverTitle;
+      return _serverStatus;
     },
 
     rewind: function () {
-      var title = _serverTitle;
+      var status = _serverStatus;
       this.dispose();
-      return title;
+      return status;
     }
   }
 });
 
-module.exports = DocumentTitle;
+module.exports = NestedStatus;

package.json

@@ -1,39 +1,39 @@
 {
-  "name": "react-document-title",
-  "version": "1.0.2",
-  "description": "A declarative, nested, stateful document.title for React",
+  "name": "react-nested-status",
+  "version": "0.1.0",
+  "description": "A nested, stateful status code thing for React. Based on react-document-title.",
   "main": "index.js",
   "peerDependencies": {
-    "react": ">=0.11.0 || >=0.13.0-beta.1"
+    "react": ">=0.11.0 || >=0.13.0"
   },
   "scripts": {
     "test": "mocha",
     "lint": "jshint index.js test"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/gaearon/react-document-title.git"
+    "url": "https://github.com/Ambroos/react-nested-status.git"
   },
   "keywords": [
     "react",
     "component",
     "react-component",
-    "document.title",
-    "title",
+    "status",
+    "express",
     "jsx"
   ],
-  "author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
+  "author": "Ambroos Vaes <ambroosv@gmail.com> (http://github.com/Ambroos)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/gaearon/react-document-title/issues"
+    "url": "https://github.com/Ambroos/react-nested-status/issues"
   },
-  "homepage": "https://github.com/gaearon/react-document-title",
+  "homepage": "https://github.com/Ambroos/react-nested-status",
   "devDependencies": {
     "expect.js": "^0.3.1",
     "global": "^4.3.0",
     "jshint": "^2.5.6",
     "mocha": "^2.0.1",
-    "react": "^0.13.0-beta.1"
+    "react": "^0.13.0"
   },
   "dependencies": {
     "react-side-effect": "~0.3.0"

test/browser.js

@@ -3,18 +3,18 @@
 'use strict';
 var expect = require('expect.js'),
     React = require('react'),
-    DocumentTitle = require('../');
+    NestedStatus = require('../');
 
-describe('DocumentTitle', function () {
+describe('NestedStatus', function () {
   it('has a displayName', function () {
-    var el = React.createElement(DocumentTitle);
+    var el = React.createElement(NestedStatus);
     expect(el.type.displayName).to.be.a('string');
     expect(el.type.displayName).not.to.be.empty();
   });
   it('hides itself from the DOM', function () {
     var Component = React.createClass({
       render: function () {
-        return React.createElement(DocumentTitle, {title: 'irrelevant'},
+        return React.createElement(NestedStatus, {code: 2727},
           React.createElement('div', null, 'hello')
         );
       }
@@ -25,7 +25,7 @@ describe('DocumentTitle', function () {
   it('throws an error if it has multiple children', function (done) {
     var Component = React.createClass({
       render: function () {
-        return React.createElement(DocumentTitle, {title: 'irrelevant'},
+        return React.createElement(NestedStatus, {code: 2727},
           React.createElement('div', null, 'hello'),
           React.createElement('div', null, 'world')
         );
@@ -49,7 +49,7 @@ describe('DocumentTitle', function () {
     });
     var Component2 = React.createClass({
       render: function () {
-        return React.createElement(DocumentTitle, {title: 'irrelevant'},
+        return React.createElement(NestedStatus, {code: 2727},
           React.createElement('div', null,
             React.createElement('div', null, 'a'),
             React.createElement('div', null, 'b'),
@@ -74,33 +74,33 @@ describe('DocumentTitle', function () {
   });
 });
 
-describe('DocumentTitle.rewind', function () {
+describe('NestedStatus.rewind', function () {
   it('clears the mounted instances', function () {
     React.renderToStaticMarkup(
-      React.createElement(DocumentTitle, {title: 'a'},
-        React.createElement(DocumentTitle, {title: 'b'}, React.createElement(DocumentTitle, {title: 'c'}))
+      React.createElement(NestedStatus, {code: 201},
+        React.createElement(NestedStatus, {code: 202}, React.createElement(NestedStatus, {code: 203}))
       )
     );
-    expect(DocumentTitle.peek()).to.equal('c');
-    DocumentTitle.rewind();
-    expect(DocumentTitle.peek()).to.equal(null);
+    expect(NestedStatus.peek()).to.equal(203);
+    NestedStatus.rewind();
+    expect(NestedStatus.peek()).to.equal(200);
   });
-  it('returns the latest document title', function () {
-    var title = 'cheese';
+  it('returns the latest status code', function () {
+    var code = 200;
     React.renderToStaticMarkup(
-      React.createElement(DocumentTitle, {title: 'a'},
-        React.createElement(DocumentTitle, {title: 'b'}, React.createElement(DocumentTitle, {title: title}))
+      React.createElement(NestedStatus, {code: 404},
+        React.createElement(NestedStatus, {code: 500}, React.createElement(NestedStatus, {code: code}))
       )
     );
-    expect(DocumentTitle.rewind()).to.equal(title);
+    expect(NestedStatus.rewind()).to.equal(code);
   });
-  it('returns nothing if no mounted instances exist', function () {
+  it('returns 200 if no mounted instances exist', function () {
     React.renderToStaticMarkup(
-      React.createElement(DocumentTitle, {title: 'a'},
-        React.createElement(DocumentTitle, {title: 'b'}, React.createElement(DocumentTitle, {title: 'c'}))
+      React.createElement(NestedStatus, {code: 500},
+        React.createElement(NestedStatus, {code: 404}, React.createElement(NestedStatus, {code: 301}))
       )
     );
-    DocumentTitle.rewind();
-    expect(DocumentTitle.peek()).to.equal(null);
+    NestedStatus.rewind();
+    expect(NestedStatus.peek()).to.equal(200);
   });
 });