Skip to content
This is intended to be a boilerplate component. Clone this component and use as a starting point for your new compoent.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
demo
src
.browserslistrc
.editorconfig
.eslintignore
.eslintrc.js Update scaffold to Babel 7 and add updates from theme scaffold Sep 20, 2018
.gitignore
CONTRIBUTING.md
README.md
babel.config.js
package-lock.json
package.json
postcss.config.js
webpack.config.js

README.md

NOTE: This is intended to be a boilerplate component. Clone this component, remove this comment, and use the rest as a starting point for your new compoent.

10up Component Name

Component Description

Installation

NPM

npm install --save @10up/component-name

Standalone

Clone this repo and import component.js and component.css from the dist/ directory.

API

This component accepts two arguments, the selector for the component container and an object containing optional callbacks.

Callbacks

  • onCreate: Called after the component is initialized on page load

Usage

Markup

This is the markup template expected by the component.

<div class="component">
</div>

CSS

The styles can be imported into your existing codebase by using PostCSS imports, or by including the standalone CSS file in your project.

PostCSS Imports

@import '@10up/component-name';

Standalone

Include the component.css file from the dist/ directory.

JavaScript

Create a new instance by supplying the selector to use for the component and an object containing any necessary callback functions.

NPM

import component from '@10up/component-name';

component( '.component', {
	onCreate: function() {
		console.log( 'onCreate callback' );
	}
} );

Standalone

Include the component.js file from the dist/ directory and access the component from the gobal TenUp object.

let myComponent = new TenUp.component( '.component', {
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
} );

Demo

Example implementations can be found in the demo directory.

You can’t perform that action at this time.