How to use uikit-react - 4 common examples

To help you get started, we’ve selected a few uikit-react 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 stipsan / uikit-react / src / stories / Button.js View on Github external
import { storiesOf } from '@kadira/storybook'
import { Button } from 'uikit-react'

// This is to work around: https://github.com/kadirahq/react-storybook-addon-info/issues/26#issuecomment-229029177
Button.displayName = 'Button'

storiesOf('Button', module)
  .addWithInfo('Basic Usage', '', () => (
    <div>
      <button>Primary</button>
      &nbsp;
      <button>Success</button>
      &nbsp;
      <button>Danger</button>
      &nbsp;
      <button>Link</button>
      &nbsp;
      <button type="submit">Submit</button>
    </div>
  ), { header: false, inline: true, propTables: [Button] })
github stipsan / uikit-react / src / stories / Select.js View on Github external
// import Option from 'uikit-react/Select/Option'
// import Value from 'uikit-react/Select/Value'

import { storiesOf, action } from '@kadira/storybook'
import { cloneElement, Component, PropTypes } from 'react'
import { Select } from 'uikit-react'

// This is to work around: https://github.com/kadirahq/react-storybook-addon-info/issues/26#issuecomment-229029177
Select.displayName = 'Select'

class Form extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    defaultValue: PropTypes.any, // eslint-disable-line react/forbid-prop-types
  }
  static props = {
    defaultValue: null,
  }
  state = {
    value: this.props.defaultValue,
  }
  logChange = action('onChange')
  handleChange = (value) => {
    this.setState({ value })
    this.logChange(value)
github stipsan / uikit-react / docs / client / components / Playground / ReactPlayground.js View on Github external
// Public imports, needed for ReactPlayground code samples to work

import * as modReact from 'react'
import * as modReactDOM from 'react-dom'
import * as modUIkitReact from 'uikit-react'

import babel from 'babel-core/browser'
import CodeMirror from 'codemirror'

const React = modReact.default
const ReactDOM = modReactDOM.default
const UIkitReact = modUIkitReact.default

// Private imports


// TODO actually recognize syntax of TypeScript constructs

CodeMirror.defineMode('javascript', function (config, parserConfig) {
  var indentUnit = config.indentUnit
  var jsonMode = parserConfig.json
  var isTS = parserConfig.typescript

  // Tokenizer

  var keywords = function () {
    function kw(type) { return { type: type, style: 'keyword' } }
    var A = kw('keyword a'), B = kw('keyword b'), C = kw('keyword c')
github stipsan / uikit-react / src / stories / Notification.js View on Github external
&gt;
        {`${type}-${position}`}
        {this.props.isSticky ? '- isSticky' : ''}
        {this.props.icon ? '- icon' : ''}
        {this.props.onClick ? '- click' : ''}
        {this.props.timeout ? '- timeout' : ''}
      
      
    )
  }
}

Notification.displayName = 'Notification'

storiesOf('Notification', module)
  .addWithInfo('Basic Usage', '', () =&gt; (
    <div>
      
    </div>
  ), { header: false, inline: true, propTables: [Notification] })
  .addWithInfo('Position', '', () =&gt; (
    <div>
      
      
      
      
      
      
    </div>

uikit-react

UIkit components for use in React.

ISC
Latest version published 3 years ago

Package Health Score

42 / 100
Full package analysis