Practical Example

import React from 'react';
import { Splide, SplideSlide } from '../../../../src/js';
import { createSlides } from "../utils/slides";

/**
 * The class for the thumbnail slider example.
 * Need to call sync() after the component is mounted, using refs.
 */
export default class ThumbnailsExample extends React.Component {
  /**
   * ThumbnailExample constructor.
   *
   * @param {Object} props - Props.
   */
  constructor( props ) {
    super( props );

    this.primaryRef   = React.createRef();
    this.secondaryRef = React.createRef();
  }

  /**
   * Set the sync target right after the component is mounted.
   */
  componentDidMount() {
    this.primaryRef.current.sync( this.secondaryRef.current.splide );
  }

  /**
   * Render slides.
   *
   * @return {ReactNode[]}
   */
  renderSlides() {
    return createSlides().map( slide => (
      <SplideSlide key={ slide.src }>
        <img src={ slide.src } alt={ slide.alt } />
      </SplideSlide>
    ) );
  };

  /**
   * Render the component.
   *
   * @return {ReactNode} - React component.
   */
  render() {
    const primaryOptions = {
      type      : 'loop',
      perPage   : 2,
      perMove   : 1,
      gap       : '1rem',
      pagination: false,
    };

    const secondaryOptions = {
      type        : 'slide',
      rewind      : true,
      gap         : '1rem',
      pagination  : false,
      fixedWidth  : 110,
      fixedHeight : 70,
      cover       : true,
      focus       : 'center',
      isNavigation: true,
      updateOnMove: true,
    };

    return (
      <div className="wrapper">
        <h2>Thumbnail Slider</h2>

        <a
          href="https://github.com/Splidejs/react-splide/blob/master/examples/src/js/components/ThumbnailsExample.jsx"
          target="_blank"
          rel="noopener"
        >
          View Code
        </a>

        <Splide options={ primaryOptions } ref={ this.primaryRef }>
          { this.renderSlides() }
        </Splide>

        <Splide options={ secondaryOptions } ref={ this.secondaryRef }>
          { this.renderSlides() }
        </Splide>
      </div>
    );
  }
}
  

Embedded Code

function Component( { edges } ) {
  return (
    <div className={ `{ trap }` }>
      <div style={ { color: 'red', marginRight: '2rem' } }>
      </div>
    </div>
  );
}
  
function Component( { edges } ) {
  return (
    <div className={ `<div>trap!</div>` }>
      <div style={ { color: 'red', marginRight: '2rem' } }>
      </div>
    </div>
  );
}
  
function Component() {
  return  <Container options={ { position: { x: 100, y: 200 }, rotation: { x: 90, y: 30 } } } />
}

console.log( 'javascript' );
  

Self Closed Tags

const Component = () => (
  <Button isPrimary />
)

<Button className={ '/>' } type="button" data-temp="/>" data-temp='/>' />

const Component = () => (
  <Button className={ '/>' }
    type="button"
    data-temp="/>"
    data-temp='/>'
  />
)
  

Fragments

function Component() {
  return (
    <>
      <span>a</span>
      <span>b</span>
    </>
  );
}

console.log( 'javascript' );