loading css/javascript file based on prop

Question

I am working a reactjs file that uses the react-ace library. Currently my code looks like this

import React, { Component } from 'react';
import 'brace/mode/html';
import 'brace/theme/monokai';
import AceEditor from 'react-ace';

class AceHTML extends Component {
    render () {
        return (
            <AceEditor
                mode="html"
                theme="monokai"
                name="Sample"
                showPrintMargin={false}
                wrapEnabled={true}
                value={this.state.value}
                editorProps={{
                    $blockScrolling: true
                }} />
        );
    }
}

However I am trying to figure out a way to make it more generic. So I could say something like <Ace mode="javascript" /> and then in the component would import brace/mode/javascript instead of brace/mode/html

So my question is: What is the best way to load a library instead of using import?

PS: The reason I specifically pointed out that I am using react is because I am using create-react-app to create the application.

Answer 1

import all assets you want to use and you will be able to make changes as you please.

If you don't want to import all assets initially, you can use dynamic imports and load required chunks when a user requests a different editor configuration:

  async changeTheme(theme) {
    await import("brace/theme/" + theme)
    this.setState({ theme });
  }

  async changeMode(mode) {
    await import("brace/mode/" + mode)
    this.setState({ mode });
  }

live demo: https://stackblitz.com/edit/react-nzivmp?file=index.js (without dynamic imports since they don't work on stackblitz)

import React from 'react';
import { render } from 'react-dom';
import brace from 'brace';
import AceEditor from 'react-ace';

import 'brace/mode/html';
import 'brace/mode/javascript';
import 'brace/theme/monokai';
import 'brace/theme/github';

function onChange(newValue) {
  console.log('change',newValue);
}

// Render editor
export default ({mode, theme}) => (
  <AceEditor
    mode={mode}
    theme={theme}
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{$blockScrolling: true}}
  />
);

Answer 2

Importing libs isn't job for React. Webpack decides what to load to a bundle file. If you want to use any options based on props you'll need to import both anyway.

If there are large files and you don't want to load both of them for your application's user you can fetch them via AJAX request.