@codeurs/front

Collection of mithril utilities and components

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
02May 25, 2021Feb 4, 2018Minified + gzip package size for @codeurs/front in KB

Readme

Components

A collection of (currently) unfinished and undocumented mithril utilities and components.

Table of Contents

Action

Use an action component when you have an internal or external link.

import {action} from '@codeurs/front'

view() {
  return m('a', action('/url'))
}

If you have multiple attributes you must write it a little bit different.

import {action} from '@codeurs/front'

view() {
  return m('a', {
    class: 'link',
    ...action('/url')
  })
}

Classes

Conditionally join classNames together. Uses classNames in its implementation but allows you to easily prefix them.

import {classes} from '@codeurs/front'

view() {
  const {mod} = this.attrs
  const open = true

  return [
    //class will be 'mod-small'
    m('a', classes({mod: 'small'}), 'Size'),

    //class will be 'mod-small.mod-black'
    m('a', classes({mod: ['small', 'black']}), 'Size and color'),

    //class will not be set if mod is falsy (false/null/undefined/0/NaN/'')
    m('a', classes({mod}), 'Modification'),

    //class will be 'is-open' if open evaluates to true
    m('a', classes({is: {open}}), 'Is open'),

    //class will be 'is-active' if url is '/home'
    m('a', classes({is: {active: action.isActive('/home')}}), 'Is active')
  ]
}

MediaQuery

Media queries are useful when you want to modify your site depending on the browser's width. The big advantage over css media queries is that elements are not shown but also not drawn.

import {MediaQuery} from '@codeurs/front'

view() {
  return [
    m(MediaQuery, {
      maxWidth: 767,
      view: () => m('p', 'Content that can only be seen up to 768 pixels.')
    }),
    m(MediaQuery, {
      minWidth: 768,
      view: () => m('p', 'Content that can only be seen from 768 pixels.')
    })
  ]
}

Modal

A temporary UI overlay.

import {Component, ModalStore, Modal, ModalOverlay} from '@codeurs/front'

class ModalExample extends Component {
  modal = new ModalStore()
  view() {
    return [
      m('a', {onclick: this.modal.open}, 'Open modal'),
      m(Modal, this.modal, [
        m(ModalOverlay),
        m('.modalexample', 'Popup content')
      ])
    ]
  }
}

Portal

Creates a top-level node in the body and mounts its children. Useful to escape z-index stacking for modals.

import {Component, Portal} from '@codeurs/front'

class PortalExample extends Component {
  view() {
    return m(Portal, [
      m('.portalexample', 'This is placed at the end of document.body')
    ])
  }
}

Slider

Horizontal touch enabled slider. Slides can be of variable width.

import {Component, Slider, SliderStore} from '@codeurs/front'

export default class SliderExample extends Component {
  slider = new SliderStore()
  view() {
    return m('.sliderexample', [
      m(Slider, this.slider, [
        m('.sliderexample-slide'), // display: inline-block
        m('.sliderexample-slide')  // etc ...
      ]),
      m('a', {onclick: e => this.slider.goPrevious()}, 'Previous'),
      m('a', {onclick: e => this.slider.goNext()}, 'Next')
    ])
  }
}

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.