React and bootstrap without importing and embedding into application

Question

We all know how to import Bootstrap into an application (in this case React) but what happens when my React application will be embedded into a website that already has Bootstrap added as an external library?

I am familiar with the classes that Bootstrap offers and they are pretty straight forward to use as well but where things are tricky is when I need Mixins, and specifically those for responsive design:

@include media-breakpoint-up(sm) {
   @include make-col(6);
}

Is there a way to use that without having to include Bootstrap in my React application and possibly overwrite some of the updated values coming from the parent site? Or would it make more sense for me to declare my own breakpoints?

@media (min-width: 576px) { ... }

Answer 1

Well, it would be better to add a custom breakpoint Mixins and use it and it would make more sense since you don't have to depend on Bootstrap.

Something similar to this.

// breakpoint.scss

$breakpoints: (
  "sm": 640px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
  "xxl": 1536px,
) !default;

@mixin breakpoint-up($width) {
  @if map-has-key($breakpoints, $width) {
    @media (min-width: map-get($breakpoints, $width)) {
      @content;
    }
  }
}

@mixin breakpoint-down($width) {
  @if map-has-key($breakpoints, $width) {
    @media (max-width: (map-get($breakpoints, $width) - 1px)) {
      @content;
    }
  }
}

@mixin breakpoint-between($fromWidth, $toWidth) {
  @if map-has-key($breakpoints, $fromWidth) {
    @media (min-device-width: map-get($breakpoints, $fromWidth)) and (max-device-width: (map-get($breakpoints, $toWidth) - 1px)) {
      @content;
    }
  }
}

Hope this helps :)