@increments/qiita-slide-mode

Qiita's Slide Mode component.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
20Nov 14, 2019Feb 5, 2018Minified + gzip package size for @increments/qiita-slide-mode in KB

Readme

@increments/qiita-slide-mode

Travis CI npm

@increments/qiita-slide-mode Qiita's Slide Mode component for Hyperapp.

Table of Contents

Installation

npm i @increments/qiita-slide-mode

Usage

import { h, app } from "hyperapp"
import { SlideViewer, slide } from "@increments/qiita-slide-mode"

const state = {
  article: {
    body: [
      `<h1>First Slide</h1><p>This is the first slide.</p>`,
      `<h1>Second Slide</h1><p>This is the second slide.</p>`
    ]
  },
  slide: slide.state
}

const actions = {
  slide: slide.actions
}

const view = (state, actions) => (
  <SlideViewer
    state={state.slide}
    actions={actions.slide}
    pages={state.article.body}
  />
)

app(state, actions, view, document.body)

Styles

@import "@increments/qiita-slide-mode/src/styles/vars";
@import "@increments/qiita-slide-mode/src/styles/core";

Options

Properties

contentClass?: string

  • Default markdownContent

Markdown body content CSS class name.

theme?: string

  • Default null

Color scheme theme suffix.

Example

const option = {
  contentClass: "your-class",
  theme: "your-theme"
}

const view = (state, actions) => (
  <SlideViewer
    state={state.slide}
    actions={actions.slide}
    pages={state.article.body}
    option={option}
  />
)

See inside the example directory for a working demo.

License

@increments/qiita-slide-mode is MIT licensed. See LICENSE.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.