Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-document-modifier
Advanced tools
Package was removed
Sorry, it seems this package was removed from the registry
react-document-modifier
Declaritive, nested, stateful `document` modification for React applications
#React Document Modifier
Provides declaritive, nested, stateful document modification for React applications.
Inspired by React Document Title. Built with React Side Effect.
What problem does this solve?
Often we want to modify our document node's children (e.g. <head> and <body>), which are outside the scope of our React application.
For example, you may want to add a class to <body> to prevent overflow scrolling when a modal is visible; or you may want to update the page title using document.title, when a new component is mounted (e.g. at routing).
Direct node manipulation is discouraged, as it can cause the DOM to get out-of-sync with our React application state.
What does React Document Modifier do?
DocumentModifier is a higher-order component that takes an Object of { property: value } pairs and sets them on the document node. The Object is passed from within your components, ensuring that your application always owns the state of modifications.
Features
- Can modify any immediate or child property on
document; - Like a normal React component, can use its own, or its parent's,
propsandstate; - Can be defined in many places throughout the application;
- Supports arbitrary levels of nesting, so you can define app-wide and page-specific modifications;
- Nested components override their parents, preventing duplication;
Warning: this has not been tested in isomorphic/universal environments.
Installation
$ npm install --save react-document-modifier
Dependencies:
"dependencies": {
"lodash": "^3.10.0",
"react": "^15.0.0",
"react-side-effect": "^1.0.0",
"seamless-immutable": "^5.0.0"
},
Usage
DocumentModifier takes one required prop called properties, which is an object. The object provides the properties and values you want to set, with respect to document.
Immediate properties (e.g. document.title)
To apply: document.title = "My Web App"
<DocumentModifier properties={{title: 'My Web App'}}>...</DocumentModifier>
Lower-level properties (e.g. document.body.class)
To apply: document.body.class = "noscroll"
const modifications = {
body: {
class: 'noscroll'
}
};
<DocumentModifier properties={modifications}>...</DocumentModifier>
Nested components
var App = React.createClass({
render: function () {
// Will apply "My Web App" to `document.title`, if no child overrides it
return (
<DocumentModifier properties={{title: 'My Web App'}}>
<HomePage />
</DocumentModifier>
);
}
});
var HomePage = React.createClass({
render: function () {
// Will overwrite any parent title property and use "Home", while this component is mounted
return (
<DocumentModifier properties={{title: 'Home'}}>
<h1>Home, sweet home.</h1>
</DocumentModifier>
);
}
});
var NewArticlePage = React.createClass({
render: function () {
// While this component is mounted, the title will update using a value from state
// It will also add the class 'article-page' to `document.body.class`
return (
<DocumentModifier properties={{title: this.state.title || 'Article', body: {class: 'article-page'}}}>
<div>
<h1>New Article</h1>
</div>
</DocumentModifier>
);
}
});
Todo
- Remove dependencies on
lodashandseamless-immutable
License
MIT - see LICENSE
Looking for more expressive control of <head>?
Check out React Helmet! to modify document.head.
This component was built at Observant
Observant build an integrated platform for the precision management of water in agriculture. We're hiring engineers, say hello at @obsrvnt or visit http://www.observant.net/careers/ for more.
FAQs
Declaritive, nested, stateful `document` modification for React applications
We found that react-document-modifier demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 13 Jan 2017
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025