React Carousel type functionality with JSX Content

Question

I am looking to add pages/components to the following control. Currently when you click forward and backwards you get the count displaying between the nav(igation) controls. What I am trying to achieve is to create a nav which flicks between components/views. Im using react-bootstrap. I am having trouble with the routing because it also sits within a tabbed view so want to ideally keep the same route and not have to worry about changing this for each view, see screenshot.

The following code creates the navigation. I would need advice on the best way to add the views as you click forward and backward, similar to a carousel but using views rather than images. Thanks.

import React from "react"
import styled, { css } from 'styled-components'
import './style.css'

const Button = styled.button`
      background: transparent;
      border-radius: 3px;
      border: 2px solid palevioletred;
      color: palevioletred;
      margin: 0.5em 1em;
      padding: 0.25em 1em;

      ${props => props.primary && css`
        background: palevioletred;
        color: white;
      `}
    `;

    const Container = styled.div`
      text-align: center;
    `
    class App extends React.Component {
        constructor() {
            super()
            this.state = {
                count: 0
            }
            this.handleForwardClick = this.handleForwardClick.bind(this);
            this.handleBackwardClick = this.handleBackwardClick.bind(this)
        }

        handleForwardClick() {
            this.setState(prevState => {
                return {
                    count: prevState.count + 1
                }
            })
        }

        handleBackwardClick() {
            this.setState(prevState => {
                return {
                    count: prevState.count - 1
                }
            })
        }

        render() {
            return (
                <Container className="flex-buttons">               
                    <Button onClick={this.handleForwardClick}>Forward</Button>
                    <h1>{this.state.count}</h1>
                    <Button primary onClick={this.handleBackwardClick}>Backward</Button>
                </Container>
            )
        }
    }
export default App

Perhaps you could try some existing ReactJS carousels and see if any of them accept a component as a slidable element? — GBWDev, Jan 21 '20 at 09:14
the views currently consist of class based components. We do use react-redux though so may be converted to object based components. eg. export default { component: connect(mapStateToProps)(SiteDashboard), loadData } — Steven Collins, Jan 21 '20 at 09:49
@GBWDev the view is actually a datatable which stays the same but the arrows would change the content based on and id (network address) — Steven Collins, Jan 21 '20 at 10:11

score 1 · Answer 1 · edited Jan 30 '20 at 15:08

I would recommend using slick-slider, as this carousel allows you to use html/jsx/component content rather than a traditional image node.

Example taken from the codesandbox

import React from "react";
import ReactDOM from "react-dom";
import Slider from "react-slick";
import "./index.css";
import Image from "./image";

class ReactSlickDemo extends React.Component {
  render() {
    var settings = {
      dots: true
    };
    return (
      <div className="container">
        <Slider {...settings}>

          <Image /> // use your components here

          <Image /> // use your components here

          <Image /> // use your components here

        </Slider>
      </div>
    );
  }
}

ReactDOM.render(<ReactSlickDemo />, document.getElementById("container"));

DEMO: https://codesandbox.io/s/react-slick-playground-2ygjd?fontsize=14&hidenavigation=1&theme=dark

https://github.com/akiran/react-slick

Thanks for the suggestion but I think this would only work with static content. Its actually a datatable which stays the same, its just the data which changes based on an id. data comes from api. — Steven Collins, Jan 21 '20 at 10:14
So on click of the button, trigger a method which sends a new request for data (using the new ID) in your datatable component and re-render it? — GBWDev, Jan 21 '20 at 10:19

B--rian · Answer 2 · 2020-01-21T09:13:52.277

0

If you are looking for a component which handles it: Such a thing is usually called horizontal wheel picker. I found https://www.npmjs.com/package/react-native-horizontal-picker which is in React Native, not in ReactJS. Nevertheless, it seems pretty easy, so maybe it can help you to implement it yourself. This seems to be also the advice of a related question for React Native: Input number in Angular Material Design?

I am not aware of any out-of-the-box solution from a large library like Ant Design. They offer only e.g. antd:input-number.

Further references

https://reactnativeexample.com/a-simple-react-native-wheel-picker/

edited Jan 21 '20 at 09:13

answered Jan 21 '20 at 09:02

B--rian

5,578
10
38
89

1

I don't think OP is necessarily looking for a UI component thats a bit better than using arrows. The question, as I understand it, more pertains on how to handle the switching of views/components whilst staying within the same route. What you seem to be suggesting is just a fancier set of arrows – GBWDev Jan 21 '20 at 09:12
yes thats correct, just need to be able to click through the views which have class based components in them. – Steven Collins Jan 21 '20 at 09:50

React Carousel type functionality with JSX Content

2 Answers2

Further references