How would I use React-Bootstrap in a Hyperstack component?

Question

I have a basic Hyperstack application and would like to style it.

Can I integrate with React-Bootstrap and is that a recommended approach, or should I rather look at other frameworks (e.g. Material UI?)

Any pointers to docs or sample code would be much appreciated!

Answer 1

Yes, it is very simple to integrate ReactBootstrap, MaterialUI, SemanticUIReact or ANY of the other component libraries with Hyperstack

These libraris give you Buttons, Typography, Modals and loads of ther useful UI tools which compose your UI. All of the examples listed about are React based, so each Component (let's say Button is a React Component).

The advantage of using Hyperstack means that you write your entire front end in Ruby and use these library Components as if they were Ruby classes.

For example, in ReactBootstrap, the following JSX:

<Button variant="primary">
  I am a button
</Button>

Would become in Ruby

Button(variant: :primary) { 'I am a button' }

And if we looked at a slightly complex example, a Button with loading state:

The JSX example from the ReactBootstrap website is:

function simulateNetworkRequest() {
  return new Promise(resolve => setTimeout(resolve, 2000));
}

class LoadingButton extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleClick = this.handleClick.bind(this);

    this.state = {
      isLoading: false,
    };
  }

  handleClick() {
    this.setState({ isLoading: true }, () => {
      simulateNetworkRequest().then(() => {
        this.setState({ isLoading: false });
      });
    });
  }

  render() {
    const { isLoading } = this.state;

    return (
      <Button
        variant="primary"
        disabled={isLoading}
        onClick={!isLoading ? this.handleClick : null}
      >
        {isLoading ? 'Loading…' : 'Click to load'}
      </Button>
    );
  }
}

render(<LoadingButton />);

The identical code in Ruby using Hyperstack (with an added HTTP.get):

class LoadingButton < HyperComponent
  before_mount do
    @isLoading = false
  end

  render do
    Button(variant: :primary, disabled: @isLoading) do
      @isLoading ? 'Loading' : 'Click to load'
    end.on(:click) do
      mutate @isLoading = true
      simulate_network_request
    end
  end

  def simulate_network_request
    promise = Promise.new
    HTTP.get("some_url") do |req|
      mutate @isLoading = false
      promise
    end
  end
end

Installing ReactBootstrap into Hyperstack is very simple. Just follow these instructions: https://hyperstack.org/edge/docs/dsl-client/components#importing-javascript-or-react-libraries

The same approach is true for any React library used in your Ruby code.