Adding a Bible passage picker to your React application

Since I started my journey as a Software Developer, a desire of mine has always been to create a Software focused on serving Christians.

I’m happy to share an open source package that I built what that burden in mind.

Bible Passage Picker. A React component for selecting bible passages in your React application.

So you’re building a React application, and you want your users to be able to select a bible verse via a Bible Passage Picker.

This article describes how to use a package I created just for that sole purpose. To help your users chose a bible passage using a Bible Passage Picker.

npm install --save bible-passage-picker

import React, {useState} from 'react'

import {BiblePassagePicker} from 'bible-passage-picker'
import 'bible-passage-picker/dist/index.css'
import {PassageValueType} from "../../src/types";

const App = () => {
  const [selectedPassage, setSelectedPassage] = useState<PassageValueType>({
    mode: 'single',
    single: {book: 'Genesis', chapter: 1, verse: 1},
    start: null,
    end: null
  });

  return <BiblePassagePicker value={selectedPassage} setValue={setSelectedPassage}/>
}

export default App

That’s all you have to do.

This is an Open Source project, so suggestions, PRs and issues are all welcome. https://github.com/OlaAde/bible-passage-picker

Here’s the demo project: https://github.com/OlaAde/bible-passage-picker-demonstration