Skip to content

Commit

Permalink
Re-export setRTLTextPlugin plugin (#1010)
Browse files Browse the repository at this point in the history
  • Loading branch information
Pessimistress committed Jan 29, 2020
1 parent 5bed923 commit c570c2f
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 1 deletion.
23 changes: 22 additions & 1 deletion docs/get-started/get-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,32 @@ with Browserify or - [css-loader](https://webpack.github.io/docs/stylesheets.htm
import 'mapbox-gl/dist/mapbox-gl.css';
```

## Enable Right-to-Left Language Support

![Since v5.2.2](https://img.shields.io/badge/since-v5.2.2-green)

```js
import {setRTLTextPlugin} from 'react-map-gl';

setRTLTextPlugin(
// find out the latest version at https://www.npmjs.com/package/@mapbox/mapbox-gl-rtl-text
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
null,
// lazy: only load when the map first encounters Hebrew or Arabic text
true
);
```

This is the same as `import {setRTLTextPlugin} from 'mapbox-gl'` in the browser, but will not crash in node. The export mainly offers a convenience when using server-side rendering.

To use this API, consult Mapbox's [setRTLTextPlugin](https://docs.mapbox.com/mapbox-gl-js/api/#setrtltextplugin) documentation.


## Using with Browserify, Webpack, and other JavaScript Bundlers

* `browserify` - react-map-gl is extensively tested with `browserify` and works without configuration.

* `webpack 2` - Most of the provided react-map-gl examples use webpack 2. For a minimal example, look at the [exhibit-webpack](https://github.com/uber/react-map-gl/tree/5.2-release/examples/exhibit-webpack) folder, demonstrating a working demo using `webpack 2`.
* `webpack 2` - Most of the provided react-map-gl examples use webpack 2. Look at the [get started examples](https://github.com/uber/react-map-gl/tree/5.2-release/examples/get-started) folder for minimalist templates.

* `create-react-app` - react-map-gl is compatible with [create-react-app](https://github.com/facebook/create-react-app).

Expand Down
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export {
} from './utils/transition';
export {default as MapController} from './utils/map-controller';
export {WebMercatorViewport} from 'viewport-mercator-project';
export {default as setRTLTextPlugin} from './utils/set-rtl-text-plugin';

// Experimental Features (May change in minor version bumps, use at your own risk)
export {default as _MapContext} from './components/map-context';
5 changes: 5 additions & 0 deletions src/utils/set-rtl-text-plugin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import mapboxgl from './mapboxgl';

// mapboxgl's setRTLTextPlugin, but does not crash in SSR
const setRTLTextPlugin = mapboxgl ? mapboxgl.setRTLTextPlugin : () => {};
export default setRTLTextPlugin;
1 change: 1 addition & 0 deletions test/src/utils/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@ import './dynamic-position.spec';
import './transition-manager.spec';
import './debounce.spec';
import './deep-equal.spec';
import './set-rtl-text-plugin.spec';
import './style-utils.spec';
import './version.spec';
7 changes: 7 additions & 0 deletions test/src/utils/set-rtl-text-plugin.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import test from 'tape-catch';
import {setRTLTextPlugin} from 'react-map-gl';

test('setRTLTextPlugin', t => {
t.ok(typeof setRTLTextPlugin === 'function', 'setRTLTextPlugin is exported');
t.end();
});

0 comments on commit c570c2f

Please sign in to comment.