https://github.com/swup/body-class-plugin
A swup plugin for updating the body classname 🎊
https://github.com/swup/body-class-plugin
body classname plugin swup
Last synced: about 1 year ago
JSON representation
A swup plugin for updating the body classname 🎊
- Host: GitHub
- URL: https://github.com/swup/body-class-plugin
- Owner: swup
- License: mit
- Created: 2019-05-11T15:04:02.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-12T06:06:56.000Z (over 1 year ago)
- Last Synced: 2025-04-13T12:49:03.866Z (about 1 year ago)
- Topics: body, classname, plugin, swup
- Language: TypeScript
- Homepage: https://swup.js.org/plugins/body-class-plugin
- Size: 529 KB
- Stars: 4
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Swup Body Class Plugin
A [swup](https://swup.js.org) plugin for updating the body classname after each page load.
## Installation
Install the plugin from npm and import it into your bundle.
```bash
npm install @swup/body-class-plugin
```
```js
import SwupBodyClassPlugin from '@swup/body-class-plugin';
```
Or include the minified production file from a CDN:
```html
```
## Usage
To run this plugin, include an instance in the swup options.
```javascript
const swup = new Swup({
plugins: [new SwupBodyClassPlugin()]
});
```
## Options
### prefix
By default, all classes are updated. If your site uses classes on the body element for functionality
like opening menus, you can tell the plugin to only update classnames starting with a prefix,
e.g. `page-`. It will then only update those classes and leave all other classes untouched.
```javascript
{
prefix: 'page-'
}
```
### attributes
Update additional attributes of the body element. Useful if you have defined the `lang` or `dir`
attributes or work with `data-*` attributes on the body element. Accepts an array of strings or
regular expression instances.
```javascript
{
attributes: ['lang', 'dir', /^data-/]
}
```