apeman-react-mixin-layout

apeman react package for layout mixin

Usage no npm install needed!

<script type="module">
  import apemanReactMixinLayout from 'https://cdn.skypack.dev/apeman-react-mixin-layout';
</script>

README

apeman-react-mixin-layout

Build Status Code Climate Code Coverage npm Version JS Standard

apeman react package for layout mixin

Installation

$ npm install apeman-react-mixin-layout --save

Usage

#!/usr/bin/env node

'use strict'

import React from 'react'
import {ApLayoutMixin} from 'apeman-react-mixin-layout'

// Define own component with the mixin
const ExampleComponent = React.createClass({
  mixins: [
    ApLayoutMixin
  ],
  render () {
    const s = this
    let { layouts } = s // Detected layout
    return (
      <div style={ layouts.main }>{ /* ... */ }</div>
    )
  },

  // --------------------
  // For ApLayoutMixin
  // --------------------

  // Returns initial layout object
  getInitialLayouts () {
    return {
      main: { height: 100 }
    }
  },

  // Calc layout if needed
  calcLayouts () {
    let rect = document.getElementById('outer-dom').getBoundingClientRect()
    return {
      main: {
        height: rect.height + 20
      }
    }
  }

})

License

This software is released under the MIT License.

Links