React-form-carousel NPM

react-form-carousel

Easy-to-use and customizable react component to create mobile-friendly carousel forms. Still very much a work-in-progress.

Install

npm install --save react-form-carousel

Usage

import React, { Component, Fragment } from 'react'
import Form, { Page } from 'react-form-carousel'

// Custom styling
import "./styles.css"

export default class App extends Component {

  // Handle form submit
  onSubmit = (e) => {
    e.preventDefault();
    // Handle submit
  }

  render() {
    return (
      <Form onSubmit={this.onSubmit} navigation autoHeight >
        <Page>
          <label>Color:</label><br/>
          <button type="button" onClick={() => this.setState({ color: "red" })}>Red</button>
          <button type="button" onClick={() => this.setState({ color: "blue" })}>Blue</button>
        </Page>
        <Page>
          {Wrapped}
        </Page>
      </Form>
    )
  }
}

let Wrapped =
  <Fragment>
    <label>Size: </label><br/>
    <label>SM </label><input type="radio" name="size" id="sm"/><br/>
    <label>MD </label><input type="radio" name="size" id="md"/>
    <label>LG </label><input type="radio" name="size" id="lg"/><br/>
  </Fragment >

Form Attributes

Attribute	Description
onSubmit	Function to be called when form is submitted
style	In-line styling for form element
removeDefaultStyle(default: false)	Setting this attribute to true will remove the as much of the default styling as possible
resizeDelay(default: 600)	Delay in milliseconds to wait before resizing (height) of the form
autoHeight(default: false)	Setting autoHeight to true will resize (height) of the form when browsing through Pages, otherwise it will fit to the largest (height) Page
navigation(default: true)	false removes the 'prev' and 'next/submit' buttons

Page Attributes

Attribute	Description
style	In-line styling for form
removeDefaultStyle(default: false)	Setting this attribute to true will remove the as much of the default styling as possible

Styling

This is the default styling (in comments). Edit this stylesheet or use the attribute style for inline styling and/or removeDefaultStyle to remove the default style.

/* style.css
<div.form-carousel__container>
    <div.form-carousel>
        <div.form-carousel__page>
            Content
        </div.form-carousel__page>
        ...
        <div.form-carousel__page>
            Content
        </div.form-carousel__page>
    </div.form-carousel>
    <div.form-carousel__nav-container>
        <button(.hide)>Prev</button>
        <button>Next<button/>
    </div.form-carousel__nav-container>
</div.form-carousel__container>
 */


.form-carousel__container {
  /*
  border: 1px solid black;
  */
}

.form-carousel {
  /*
  transition: height 0.6s;
  */
}

.form-carousel__page {
  /*
  padding: 10px;
  text-align: center;
  */
}

.form-carousel__nav-container {
  /* 
  padding: 10px;
  padding-top: 0;
  text-align: center;
  */
}

.form-carousel__nav-container button {
  /*
  padding: 2px 5px;
  margin: 0 5px;
  width: 100px;
} */
}

.form-carousel__nav-container button.hide {
}

License

MIT © npkevin

classnames smoothscroll-polyfill

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago