Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Readme.md #109

Merged
merged 3 commits into from
Jan 16, 2024
Merged

Readme.md #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5e075b
Update README.md
opensrc0 Jan 16, 2024
b083a0e
Update README.md
opensrc0 Jan 16, 2024
32fbf8f
fix(added component list): added component list
opensrc0 Jan 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .github/COMPONENT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
1. Button
2. Input
3. Chip
31 changes: 16 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,15 @@ $ bun add fe-theme

## Usage

#### 1. Passing configuration settings to the fe-theme library using ThemeProvider
#### 1. Use fe-theme in your application using themeProvider

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import Init from 'fe-theme/Init';
import { ThemeProvider } from 'styled-components'; // import ThemeProvider component
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()}>
<App />
</ThemeProvider>
Expand All @@ -91,29 +90,31 @@ import Button from 'fe-theme/Button';
<Button />
```

Wow, the configuration is quite simple, but wait... button design is different in my application. No worry, fellow step 3, 4.
Wow, the configuration is quite simple, but wait... button design is different in my application. No worry, follow step 3, 4.

#### 3. Creating a fe-theme folder in your application. It contains config files of components.
#### 3. Creating a fe-theme folder in your application. It contains components config file.

Create config file for all the component of fe-theme
&nbsp;&nbsp;Create config file for all the component of fe-theme
```js
COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
```

Create config file for a single component of fe-theme
<p align="center">OR</p>

&nbsp;&nbsp; Creating config file for an individual component
```js
COMPONENET_NAME={COMPONENT_NAME} COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
```

**Note:**
```PATH``` is a variable i.e. where you want to place config files for your application
```COMPONENT_NAME``` is a variable i.e. where ```component``` Input, button, CHIP (Allow any case)
&nbsp;&nbsp; **Note:**

&nbsp;&nbsp; ```1. PATH``` is a variable i.e. where you want to place config files in your application

&nbsp;&nbsp; ```2. COMPONENT_NAME``` is a variable i.e. name of the component ```Input```, ```button```. [Find the component list](./.github/COMPONENT.md)

#### 4. Passing configuration settings to the fe-theme library using ThemeProvider

```js
import React from 'react';
import ReactDOM from 'react-dom';
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
Expand All @@ -127,7 +128,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
);
```

**Note:** ```PATH``` is a variable i.e. location of config files for your application
**Note:** ```PATH``` is a variable i.e. location of config files in your application

**Hurrah...!!!** Now you can change button(any compponent) property according to your application

Expand Down