react-native-periodic

    0.1.2 • Public • Published

    npm version

    <Periodic> – 🕐🕑🕒📆 Form inputs for periodic or recurring times – daily, weekly, or monthly at a chosen time

    UI

    A segmented control for daily, weekly, or monthly. Weekdays are multi-select, day of month is a Picker, and time is a DatePickerIOS (the only iOS component - if you want an Android version, let me know). If you need anything to be more customizable, send me a PR!

    Demo

    git clone git@github.com:lorensr/react-native-periodic.git
    cd react-native-periodic
    npm i
    npm run storybook
    open http://localhost:7007/
    react-native run-ios

    Select an example in the browser and see the demo in the simulator. You may need to refresh to get them started.

    Here are some screenshots from the demo:

    Daily

    daily

    Weekly

    weekly

    Monthly

    monthly

    Usage

    <Periodic
      ref="periodic"
      initialState={{
        period: 'Weekly',
        date: new Date,
        weekdays: ['Monday', 'Friday']
      }}
      segmentedControl={{
        tint: 'white',
        backTint: 'gray',
      }}
      />
    <Button onPress={() => console.log(this.refs.periodic.state)}>
      Submit
    </Button>

    Only the time part of state.date is used. If state.period is 'Daily', only state.date is used. If it's 'Weekly', state.date and state.weekdays are used. If it's 'Monthly', state.date and state.dayOfMonth is used.

    Props are optional:

    segmentedControl: PropTypes.object,
    initialState: PropTypes.shape({
      period: PropTypes.string,
      date: PropTypes.instanceOf(Date),
      weekdays: PropTypes.arrayOf(PropTypes.string),
      dayOfMonth: PropTypes.string,
    })

    segmentedControl is passed to the SegmentedControls component as props.

    Credits

    Install

    npm i react-native-periodic

    DownloadsWeekly Downloads

    17

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • lorensr