How to use the hyperapp.h function in hyperapp

To help you get started, we’ve selected a few hyperapp examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github lukejacksonn / hyperapp-firebase-auth / src / form.js View on Github external
promptText = 'Please fill out and submit the form below',
  submitText = 'Submit',
  inputs = [{ name: 'lorem', type: 'text', placeholder: 'Example Input' }],
  action = data => console.log('Submitted', data),
  errorText = '',
  links = []
}) =>
h('form', {
  key,
  oncreate: e => e.elements[0].focus(),
  onsubmit: e => {
    e.preventDefault()
    return action(parseFormInputs(e.target))
  }
},[
  h('header', {}, [
    h('h3', {}, titleText),
    h('p', {}, promptText),
  ]),
  inputs.map(props => h('label', { style: { display: props.type === 'hidden' ? 'none' : false }}, h('input', props))),
  errorText && h('error-', {}, errorText),
  h('button', { type: 'submit' }, submitText),
  h('footer', {}, links.map(x =>
    h('a', { href: '#', onclick: e => e.preventDefault() || x.action() }, x.text)
  )),
])
github os-js / osjs-gui / src / components / Panes.js View on Github external
const view = (state, actions) => (props, children) => {
  const orientation = props.orientation || 'vertical';

  return h(Element, {
    orientation,
    class: 'osjs-gui-panes-inner'
  }, panes(state, actions, children, orientation));
};
github soenkekluth / hyperapp-example / bundle.js View on Github external
const Button = ({ label, action, disabled = false }) => h(
  'button',
  { onclick: action, disabled: disabled },
  label
);
github loteoo / hyperstatic / src / Lifecycle.js View on Github external
export const Lifecycle = (elementName, props, children) => {
  const fn = (method, eventName) => function (el) {
    const event = new CustomEvent(eventName, { detail: el })
    setTimeout(() => el.parentElement.dispatchEvent(event))
    return Object.getPrototypeOf(this)[method].call(this, el)
  }
  return h(
    elementName,
    {
      appendChild: fn('appendChild', 'create'),
      removeChild: fn('removeChild', 'remove'),
      ...props
    },
    children
  )
}
github fejes713 / accessibility-guide / website / js / components / Markdown.js View on Github external
export default ({ node = "div", content, ...props }) =>
  h(node, {
    ...props,
    oncreate: setInnerHTML(memoMarked(content))
  });
github os-js / osjs-gui / src / components / ToggleField.js View on Github external
  }, (fieldProps) => h('label', {

  }, [
    h('input', fieldProps),
    h('span', {
      class: 'osjs-toggle-input'
    }),
    h('span', {
      class: 'osjs-toggle-label'
    }, [
      props.label || '',
      ...children
    ])
  ]), ev => [props.type === 'radio'
    ? parseValue(ev.target.value)
github lukejacksonn / hyperapp-firebase-auth / src / index.js View on Github external
export const FirebaseAuthDialog = (state, actions) =>
  state.checked &&
  !state.authed &&
  h(
    'dialog',
    {
      key: 'firebase-auth-dialog',
    },
    [
      !state.user.email
        ? Identity(state, actions)
        : state.hasIdentity.length
          ? Signin(state, actions)
          : Signup(state, actions),
    ]
  )
github fxnn / deadbox / webapp / src / util / bulma.js View on Github external
return function (props, children) {
    return typeof props === "object" && !Array.isArray(props)
      ? h(name, mergeProps(props,  additionalProps), children)
      : h(name, additionalProps, props)
  }
}
github neatsoftware / term-sheets / src / components / controls / index.js View on Github external
value: 'svg',
            checked: props.exportType === 'svg',
            id: 'exportTypeSvg',
            name: 'exportType',
            onchange: props.updateExportType
          }),
          h('label', { for: 'exportTypeSvg', class: styles.exportOptLabel }, 'SVG'),
          h('input', {
            type: 'radio',
            value: 'html',
            checked: props.exportType === 'html',
            id: 'exportTypeHtml',
            name: 'exportType',
            onchange: props.updateExportType
          }),
          h('label', { for: 'exportTypeHtml', class: styles.exportOptLabel }, 'HTML'),
          h('input', {
            type: 'radio',
            value: 'gif',
            checked: props.exportType === 'gif',
            id: 'exportTypeGif',
            name: 'exportType',
            onchange: props.updateExportType
          }),
          h('label', { for: 'exportTypeGif', class: styles.exportOptLabel }, [
            'GIF',
            h('span', { class: styles.alpha }, '(alpha)')
          ]),
          h('div', { class: styles.exportActions }, [
            h('button', { onclick: props.export }, props.isExporting ? 'Exporting...' : 'Export')
          ])
        ])
github neatsoftware / term-sheets / src / components / terminal / index.js View on Github external
export const terminalView = props =>
  h(
    'div',
    {
      class: [styles.terminalContainer, props.background && styles.terminalBackground].filter(Boolean).join(' '),
      style: {
        width: props.width + 'px',
        height: props.height + 'px',
        backgroundImage: props.background ? `linear-gradient(${props.bgColor1}, ${props.bgColor2})` : null
      }
    },
    [h('div', { class: styles.terminal }, [h(terminalTitleView, props), h(terminalContentView, props)])]
  )

hyperapp

The tiny framework for building hypertext applications.

MIT
Latest version published 3 years ago

Package Health Score

60 / 100
Full package analysis

Popular hyperapp functions