Skip to content

Latest commit

 

History

History
130 lines (108 loc) · 3.21 KB

README.md

File metadata and controls

130 lines (108 loc) · 3.21 KB
Raw

react-materialui-testimonials-transition

React Material UI Testimonials Package provides Easy-to-Use Material UI Card and Paper components generating Testimonial component. Testimonial Package works with independent props i.e image, title, subtitle and testimonial.

Features

  1. Works with independent props i.e image, title, subtitle and testimonial
  2. Supports solid and gradient background passed as props
  3. Controlable transition (You can turn off with transition={false})
  4. Adjustable transition parameters such as transition speed and transition direction

NPM downloads JavaScript Style Guide

Install

npm install --save react-materialui-testimonials-transition

Usage

import React, { Component } from 'react'

import { SlideTestimonial } from 'react-materialui-testimonials-transition'

class Example extends Component {
  render() {
    return (
      <SlideTestimonial
        image='/images/1.jpg'
        alt='Arif Shariati'
        imageRadius='50%'
        title='Arif Shariati'
        subtitle='CEO'
        testimonial={'Awesome React Material UI Testimonial component Package'}
        backgroundGradient={['#FE6B8B', '#FF8E53']}
        backgroundColor='#f9f9f9'
        transition={true}
        direction='left'
        speed={1000}
        shadow={5}
      />
    )
  }
}

SlideTestimonial

<SlideTestimonial
  image='/images/1.jpg'
  alt='Arif Shariati'
  imageRadius='50%'
  title='Arif Shariati'
  subtitle='CEO'
  testimonial={'Awesome React Material UI Testimonial component Package'}
  backgroundGradient={['#FE6B8B', '#FF8E53']}
  backgroundColor='#f9f9f9'
  transition={true}
  direction='left'
  speed={1000}
  shadow={5}
/>

FadeTestimonial

<FadeTestimonial
  image='/images/1.jpg'
  alt='Arif Shariati'
  imageRadius='50%'
  title='Arif Shariati'
  subtitle='CEO'
  testimonial={'Awesome React Material UI Testimonial component Package'}
  backgroundGradient={['#FE6B8B', '#FF8E53']}
  backgroundColor='#f9f9f9'
  transition={true}
  speed={1000}
  shadow={5}
/>

ZoomTestimonial

<ZoomTestimonial
  image='/images/1.jpg'
  alt='Arif Shariati'
  imageRadius='50%'
  title='Arif Shariati'
  subtitle='CEO'
  testimonial={'Awesome React Material UI Testimonial component Package'}
  backgroundGradient={['#FE6B8B', '#FF8E53']}
  backgroundColor='#f9f9f9'
  transition={true}
  speed={1000}
  shadow={5}
/>

GrowTestimonial

<GrowTestimonial
  image='/images/1.jpg'
  alt='Arif Shariati'
  imageRadius='50%'
  title='Arif Shariati'
  subtitle='CEO'
  testimonial={'Awesome React Material UI Testimonial component Package'}
  backgroundGradient={['#FE6B8B', '#FF8E53']}
  backgroundColor='#f9f9f9'
  transition={true}
  speed={1000}
  shadow={5}
/>

Package Upate

npm update

License

MIT © arifshariati