Socket
Socket
Sign inDemoInstall

@material.ui/react-native-stepper

Package Overview
Dependencies
3
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @material.ui/react-native-stepper

Typescript friendly, Material UI Stepper implementation in React Native


Version published
Weekly downloads
36
increased by5.88%
Maintainers
1
Created
Weekly downloads
 

Changelog

Source

1.3.2 (2020-09-08)

Note: Version bump only for package material.ui

Readme

Source

React Native Stepper

Typescript friendly, Material UI Stepper implementation in React Native.

The aim is to develop with all features of stepper as provided in the Material UI Guidelines. But, the v1 does not have all those features. But ready to be used in production as an alternative.

For the time being, only vertical stepper is supported.

If you are a developer, please contribute to make this project more useful for everyone!

Create issues for any bugs or feature requests.

View Demo Here

Installation

yarn add@material.ui/react-native-stepper

or

npm i@material.ui/react-native-stepper --save

Parameters

StepperContainer

ParamTypeDefaultDescription
layout'vertical' or 'horizontal'verticallayout
themeColorstringblue[500]theme color
buttonStyleobject{}style object that is passed to the button
childrenStepView[]nullStep Views

StepView

ParamTypeDefaultDescription
titlestring''Step Title
subTitle (optional)string''Step Sub Title
childrenReact.NodenullReact Node to display as step content
onNext(optional)`() => booleanstring`() =>true
onPrevious(optional)`() => booleanstring`() =>true

Usage

import { StepperContainer, StepView } from '@material.ui/react-native-stepper'
<StepperContainer>
  <StepView title='Intro' subTitle='The intro details'>
    <Text>Step 1 Contents</Text>
  </StepView>
  <StepView title='Second' onNext={() => true} subTitle='Name and other details'>
    <Text>Step 2 Contents</Text>
  </StepView>
  <StepView title='Third Step' subTitle='Some lines'>
    <Text>Step 3 Contents …!</Text>
  </StepView>
  <StepView title='Last Step' subTitle='Finishing lines'>
    <Text>Step 4 Contents …!</Text>
  </StepView>
</StepperContainer>

Notes

  • If TapOnTitle is allowed, the user can navigate to back to the previous steps with a tap on the title of the step.
  • When TapOnTitle is enabled, the back button is hidden by default. But back button will be showing in steps which have the prop of onPrevious available

License

Copyright © 2020 Vazra, MIT License

Keywords

FAQs

Last updated on 08 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc