yarn add @plesk/ui-library
Here is an example of how to use the UI Library with create-react-app
.
yarn create react-app example
cd example
yarn add @plesk/ui-library
yarn start
Replace the contents of the src/App.js
file with the following code:
import { Layout, Button } from '@plesk/ui-library';
import '@plesk/ui-library/dist/plesk-ui-library.css';
function App() {
return (
<Layout>
<Button>{'Hello World!'}</Button>
</Layout>
);
}
export default App;
Sometimes you need to fix UI Library bug that fires in your project using UI Library.
There is a way to test dev version of the UI Library with your project. You need to use yarn link
command,
but there are some details.
- First, you need to run
yarn link
in your UI Library working copy root directory. - Then, you need to run
yarn link @plesk/ui-library
in your project working copy root directory. - Third. There is a bug with a React library that makes us to do additional steps. Run
yarn link
in your project'snode_modules/react
andnode_modules/react-dom
directories. - Then, run
yarn link react
andyarn link react-dom
in your UI Library working copy root directory.
So, in this setup, your project will use the dev copy of UI Library. And UI Library will use React from your project.