@ryusei/light
Version:
<div align="center"> <a href="https://light.ryuseijs.com"> <img alt="RyuseiLight" src="https://light.ryuseijs.com/images/svg/logo.svg" width="70"> </a>
174 lines (153 loc) • 4.04 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSX</title>
<link href="../../../../dist/css/themes/ryuseilight-ryusei.min.css" rel="stylesheet">
</head>
<body>
<h3>Practical Example</h3>
<pre>
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>
);
}
}
</pre>
<h3>Embedded Code</h3>
<pre>
function Component( { edges } ) {
return (
<div className={ `{ trap }` }>
<div style={ { color: 'red', marginRight: '2rem' } }>
</div>
</div>
);
}
</pre>
<pre>
function Component( { edges } ) {
return (
<div className={ `<div>trap!</div>` }>
<div style={ { color: 'red', marginRight: '2rem' } }>
</div>
</div>
);
}
</pre>
<pre>
function Component() {
return <Container options={ { position: { x: 100, y: 200 }, rotation: { x: 90, y: 30 } } } />
}
console.log( 'javascript' );
</pre>
<h3>Self Closed Tags</h3>
<pre>
const Component = () => (
<Button isPrimary />
)
<Button className={ '/>' } type="button" data-temp="/>" data-temp='/>' />
const Component = () => (
<Button className={ '/>' }
type="button"
data-temp="/>"
data-temp='/>'
/>
)
</pre>
<h3>Fragments</h3>
<pre>
function Component() {
return (
<>
<span>a</span>
<span>b</span>
</>
);
}
console.log( 'javascript' );
</pre>
<script src="../../../../dist/js/ryuseilight.min.js"></script>
<script src="../../../../dist/js/languages/jsx.min.js"></script>
<script>
const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre', { language: 'jsx' } );
</script>
</body>
</html>