Using Enact with Third-party Libraries
Overview
Enact is a fantastic way to build apps. However, you’re not limited to developing your apps using only Enact components, nor are you prevented from using pieces of Enact in other React apps. You can mix and match third-party libraries with Enact easily.
Using Third-Party Components Inside of Enact
When creating an app using enact create
, it creates app boilerplate that is set up for a
Moonstone
styled app. However, if you want to use another UI library like
material-ui
(see: Moonstone + material-ui example), reactstrap
, or react-router
, just use npm install
.
You can include components just like you normally would by using import
.
import { Button } from 'reactstrap';
const App = kind({
name: 'App',
render: (props) => (
<div>
<Button color="primary">Danger!</Button>
</div>
)
});
For libraries like bootstrap, you can also import the css in your App.less
file.
@global-import 'bootstrap/dist/css/bootstrap.css';
The advantage of this is you get to use Enact’s cli
to develop, test, and build applications.
There is also a Moonstone starter template on CodeSandbox that can be used to quickly test how third-party libraries and components can be used with Enact.
Using Enact Outside of Enact
If you’re using something like create-react-app
, it’s pretty easy to use Enact as a module.
You can create a new application, as follows:
create-react-app react-add-enact
Then, add/install Enact dependencies like @enact/core
and @enact/ui
to package.json
.
At this point you can use core Enact features (kind
with computed props) and un-styled
components (ui/Button
).
import kind from '@enact/core/kind';
import Button from '@enact/ui/Button';
const App = kind({
name: 'App',
render: (props) => (
<Button>Hello Enact!</Button>
)
});
You can even use Moonstone
themed components after installing @enact/moonstone
.
import BodyText from '@enact/moonstone/BodyText';
import Button from '@enact/moonstone/Button';
import { MoonstoneDecorator } from '@enact/moonstone/MoonstoneDecorator';
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<BodyText centered>
These are Enact Moonstone components in a CRA app
</BodyText>
<Button>Click me</Button>
</div>
);
};
}
export default MoonstoneDecorator(App);
Styling Enact Components Outside of Enact
Behind the scenes, Enact supports using CSS modules and most Enact components provide public class names that can be overridden to easily change their style.
CRA Example
If you are using react-scripts
version 2.0.0
or later, you can import style overrides by using
the [component].module.css
filename convention. For earlier versions, you will need to eject
the CRA app and modify the webpack configuration to enable CSS modules. This article
is a good reference for enabling CSS modules prior to 2.0.0
.
/* Button.module.css */
.bg { /* public class name in Moonstone/Button */
background-color: #a4939d !important;
}
// App.js
import Button from '@enact/moonstone/Button';
import { MoonstoneDecorator } from '@enact/moonstone/MoonstoneDecorator';
import React, { Component } from 'react';
import buttonCss from './Button.module.css';
class App extends Component {
render() {
return (
<div>
<Button css={buttonCss}>Click me</Button>
</div>
);
};
}
export default MoonstoneDecorator(App);
Internationalization Outside of Enact
CRA Example
In order to use the @enact/i18n
library for internationalization, you can eject
your CRA app, install your required Enact libraries (plus, @enact/dev-utils
), and update the webpack configuration.
// package.json
...
"devDependencies" : {
"@enact/dev-utils": "2.0.0"
},
"dependencies": {
...
"@enact/i18n": "2.3.0",
"@enact/moonstone": "2.3.0",
...
}
...
// webpack.config.js
...
const {GracefulFsPlugin, ILibPlugin} = require('@enact/dev-utils');
...
plugins: [
// new GracefulFsPlugin(), // use on Windows OS if you run into filesystem handler problems
new ILibPlugin()
]
...
Theming
Enact also has support theming. This way you can take our components and style them to best fit
the platform you wish to target. You can learn about that in our
Theming
section.