Web components from client project
npm install jrts-web-ll> Web components from client project
 
``bash`
npm install --save jrts-web-ll
`jsx
import React, { Component } from 'react'
import "bootstrap/dist/css/bootstrap.min.css"
import {
ButtonLinkOpaque,
Foo,
Footer,
BgImg,
SideDrawer,
Backdrop,
Modal,
HttpLoadOrError,
BgImgOpaque,
FAQs,
createSanityClient,
IntroLayover,
MobileLayerRow,
PictureSlideInFromRight,
Testimonial,
Alert,
BgVideoCenterDiv,
BasicContentPreview,
CategoryList,
Map,
Hours,
Input,
ContactForm
} from 'jrts-web-ll'
export default class App extends Component {
constructor(props) {
super(props);
this.onChangeSideDrawer = this.onChangeSideDrawer.bind(this)
this.onChangeModal = this.onChangeModal.bind(this)
this.onChangePicture = this.onChangePicture.bind(this)
this.state = {
showSideDrawer: false,
showModal: false,
showPicture: false
}
}
onChangeSideDrawer() {
this.setState({
showSideDrawer: this.state.showSideDrawer ? false : true
})
}
onChangePicture() {
this.setState({
showPicture: this.state.showPicture ? false : true
})
}
onChangeModal() {
this.setState({
showModal: this.state.showModal ? false : true
})
}
render () {
const client = createSanityClient('zbi98nq2')
const hoursPerDay = [
{day: "Mon", hours: "9AM-5PM"},
{day: "Tues", hours: "9AM-7PM"},
{day: "Wed", hours: "9AM-7PM"},
{day: "Thurs", hours: "9AM-7PM"},
{day: "Fri", hours: "9AM-5PM"},
{day: "Sat*", hours: "10AM-4PM"},
{day: "Sun", hours: "Closed"}
]
return (
Example error message for HttpLoadOrError
}}
>
BgImgOpaque
title="Frequently Asked Questions"
sanityQuery="*[_type == 'faq']{title, 'content': answer[]{..., 'asset': asset->}}"
client={client} />
title="Services"
text="This is the text prop in the MobileLayerRow component"
image="https://cdn.sanity.io/images/zlybple6/production/a744a3ed1d86528e04e3057d13852dd377122a72-630x840.jpg"
>
image="https://cdn.sanity.io/images/zlybple6/production/a744a3ed1d86528e04e3057d13852dd377122a72-630x840.jpg"
show={this.state.showPicture}
close={this.onChangePicture}
/>
title="BgVideoCenterDiv"
text="Maybe one day a video is behind this div"
>
title='BasicContentPreview'
mainImgUrl="https://cdn.sanity.io/images/zlybple6/production/e7571c01c4fb17c6867b37c041cf240872ac64e3-840x630.jpg"
styling={{margin: "30px", boxShadow: "5px 0 22px black"}}
/>
label='CategoryList'
selectedCategories={'first'}
categories={['first', 'second', 'third']}
changeCategory={() => console.log('category changed')}
/>
title="Map Component"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2684.5577582307524!2d-117.41393278414337!3d47.71242287919176!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x549e194c2fd25c2d%3A0x4b226acd102d3442!2s6011%20N%20Division%20St%2C%20Spokane%2C%20WA%2099208!5e0!3m2!1sen!2sus!4v1578676029939!5m2!1sen!2sus"
/>
inputtype="input"
placeholder="Input component"
type="text"
text="Extra text"
label="Input component"
className="form-control"
smallStyling={{color: "red"}}
/>
inputtype="textarea"
placeholder="textarea"
type="text"
label="Input component"
className="form-control"
text="help"
/>
titleStyling={{color: "red"}}
title="Contact Form"
url="/api/nowhere"
errorMessage="Something went wrong.."
successMessage="Hurray"
textareaLabel="Message"
textareaPlaceholder="Send us a message!"
labelStyling={{color: "blue"}}
/>
MIT © jdretz