Skip to content

Cycle.js UI component library with Material Design styles

License

Notifications You must be signed in to change notification settings

eldarlabs/cycle-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

eldarlabs/cycle-ui

circleci build version bitHound Overall Score MIT License semantic-release

A Cycle.js HTML component library.

##Demonstration Site

An experimental work in progress conversion of the Material Design react-toolbox components to Cycle.js components. The styles from react-toolbox are written with PostCSS. Future work may define an interface for interchangeable styles.

How to use

The easiest way to get started is to clone the cycle-ui-typescript-webpack starter project. It includes a Cycle-UI kitchen sink demo (demonstration site). Start modifying the starter project or get some ideas for how to use Cycle-UI in your own project.

Note: I want to bring a proposal to Cycle-DOM to allow removal of the .DOM boilerplate.

// Import components you want to use
import { Input, RadioButton } from '@eldarlabs/cycle-ui';

// Use components in your Cycle.js view

return div([
  h3('.example', [`Using Cycle-UI`]),
  Input(sources, {
      label: `Answer to life`,
      maxLength: 50,
  }).DOM,
  RadioButton(sources, {
    label: 'Radio easy',
    checked: true,
  }).DOM,
])

Entitlement

This project is open source so team members can share knowledge and learn from the community. Using this software does not entitle you to any support or right to demand features. See below for how to contribute.

Feedback

Let is know of any Issues. Pull requests will be considered.

Related projects

  • cycle-ui-typescript-webpack - Cycle.js Starter Project for using Cycle-UI, TypeScript and WebPack.
  • Cycle.js - required to use the Cycle-UI components. Declarative programming with data flow.
  • React Toolbox Components - uses the PostCSS/SASS styles from this library.
  • Snabbdom - a virtual DOM library
  • cycle-snabbdom - a Cycle.js DOM library that uses the Snabbdom virtual DOM.
  • RxJS - Functional, Reactive, Observable streams of data that power Cycle.js
  • TypeScript - Types, Interfaces, static checking and other good stuff.
  • Typings - Trying to make TypeScript Type definitions easier to deal with.
  • Semantic Release - Trying out this tool for streamlining a release.
  • Commitizen - Commit tool that works well with Semantic Release.

License

The MIT License

Copyright (c) 2016 Eldar Labs