Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
opensrc0 authored Feb 18, 2024
1 parent 6091e77 commit d204184
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,12 @@ $ bun add fe-theme

```js
import { ThemeProvider } from 'styled-components'; // import ThemeProvider component
import Init from 'fe-theme/Init'; // import Init function
import init from 'fe-theme/init'; // import Init function
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
// Wrap your application with ThemeProvider
<ThemeProvider theme={Init()}>
<ThemeProvider theme={init()}>
<App />
</ThemeProvider>
);
Expand All @@ -94,9 +94,10 @@ Wow, the configuration is quite simple, but wait... button design is different i

#### 3. Create your own theme

&nbsp;&nbsp; **a)** Create an empty folder called ```fe-theme``` in your application at any location.
&nbsp;&nbsp; **a)** Create an empty folder called ```fe-theme-config``` in your application at any location.

&nbsp;&nbsp; **c)** Create configButton.js file inside fe-theme-config folder (To configure Button Component)

&nbsp;&nbsp; **b)** Create configButton.js file inside fe-theme folder
```js
const Button = {
"borderRadius": "50px",
Expand All @@ -117,7 +118,6 @@ export default Button;

&nbsp;&nbsp; **c)** Create theme.js file and include configButton.js
```js
/* eslint-disable import/no-anonymous-default-export */
import Button from '../configButton';

export default {
Expand All @@ -127,17 +127,17 @@ export default {
```
Yeah, We have created config files Mannually but You can also generate config files automatically using command line [Check Commands](./.github/COMMAND.md)

#### 4. Passing configuration settings to the fe-theme library using ThemeProvider
#### 4. Pass the newly created theme file in init function

```js
import { ThemeProvider } from 'styled-components';
import Init from 'fe-theme/Init';
import theme from '{PATH}/fe-theme/universal/theme'; // Include your theme to fe-theme
import init from 'fe-theme/init';
import theme from '{PATH}/fe-theme-config/theme'; // Include your theme to fe-theme
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
// Inside the Init function pass theme
<ThemeProvider theme={Init(theme)}>
<ThemeProvider theme={init(theme)}>
<App />
</ThemeProvider>
);
Expand All @@ -149,7 +149,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(

```
Your Application Folder(Root Directory)
└──fe-theme
└──fe-theme-config
├──configButton
├──configInput
└──configChip
Expand Down

0 comments on commit d204184

Please sign in to comment.