Skip to content

Commit ae0dfe2

Browse files
JoseRFelixJoseRFelix
committed
update package.json and readme
1 parent ef8c469 commit ae0dfe2

2 files changed

Lines changed: 48 additions & 15 deletions

File tree

‎README.md‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<h1 align="center">react-css-theme-switcher</h1>
1+
<div align="center">
2+
<h1>React CSS Theme Switcher</h1>
3+
</div>
24
<p>
35
<a href="https://www.npmjs.com/package/react-css-theme-switcher" target="_blank">
46
<img alt="Version" src="https://img.shields.io/npm/v/react-css-theme-switcher.svg">
@@ -23,6 +25,18 @@
2325

2426
- node >=10
2527

28+
## Installation
29+
30+
```shell
31+
npm i react-css-theme-switcher
32+
```
33+
34+
or with Yarn:
35+
36+
```shell
37+
yarn add react-css-theme-switcher
38+
```
39+
2640
## Usage
2741

2842
Import ThemeSwitcherProvider and pass a theme object with the names of the themes and their respective paths to the CSS stylesheet (normally, public folder).
@@ -40,7 +54,7 @@ const themes = {
4054

4155
const App = () => {
4256
return (
43-
<ThemeSwitcherProvider defaultTheme='light' themeMap={themes}>
57+
<ThemeSwitcherProvider defaultTheme="light" themeMap={themes}>
4458
<Component />
4559
</ThemeSwitcherProvider>
4660
);
@@ -76,14 +90,14 @@ const Component = () => {
7690
};
7791
```
7892

79-
### Avoiding CSS Override
93+
### CSS Injection Order
8094

8195
react-css-theme-switcher provides a way to avoid collision with other stylesheets or appended styles by providing where to inject the styles. To achieve this, add an HTML comment like `<!--inject-styles-here-->` somewhere on the head and then provide `'inject-styles-here'` or your custom name in the insertionPoint prop in `ThemeSwitcherProvider`.
8296

8397
```html
8498
<!DOCTYPE html>
8599
<html lang="en">
86-
<head>
100+
<head>
87101
<style>
88102
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
89103
@@ -100,15 +114,19 @@ react-css-theme-switcher provides a way to avoid collision with other stylesheet
100114
</head>
101115

102116
<body>
103-
<div id="root"></div>
117+
<div id="root"></div>
104118
</body>
105119
</html>
106120
```
107121

108122
```jsx
109123
const App = () => {
110124
return (
111-
<ThemeSwitcherProvider defaultTheme='light' insertionPoint='inject-styles-here' themeMap={themes}>
125+
<ThemeSwitcherProvider
126+
defaultTheme="light"
127+
insertionPoint="inject-styles-here"
128+
themeMap={themes}
129+
>
112130
<Component />
113131
</ThemeSwitcherProvider>
114132
);
@@ -120,8 +138,9 @@ const App = () => {
120138
### ThemeSwitcherProvider
121139

122140
#### Props
141+
123142
| Name | Type | Default value | Description |
124-
|----------------|--------|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
143+
| -------------- | ------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
125144
| attr | String | data-theme | Attribute name for that will be appended to the body tag. Its value will be the current theme name. |
126145
| defaultTheme | String | | Default theme to load on mount. Must be in themeMap |
127146
| id | String | current-theme-style | Id of the current selected CSS. |
@@ -133,13 +152,12 @@ const App = () => {
133152
#### Returns
134153

135154
| Name | Type | Default value | Description |
136-
|--------------|-----------------------------------------|---------------|-------------------------------------------------------------------------------------------------|
155+
| ------------ | --------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------- |
137156
| currentTheme | String or Undefined | undefined | Current selected theme |
138157
| themes | Object | themeMap keys | All themes supplied in the themeMap. |
139158
| switcher | ({ theme }: { theme: string }) => void; | Function | Function to change themes. |
140159
| status | enum('idle', 'loading', 'loaded') | idle | Current load status of the selected stylesheet. Useful to prevent flicker when changing themes. |
141160

142-
143161
## Contributors
144162

145163
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

‎package.json‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
{
2+
"name": "react-css-theme-switcher",
3+
"description": "Switch between CSS themes using React",
24
"version": "0.1.4",
35
"license": "MIT",
46
"main": "dist/index.js",
@@ -19,9 +21,13 @@
1921
"lint": "tsdx lint",
2022
"prepare": "tsdx build"
2123
},
22-
"peerDependencies": {
23-
"react": ">=16"
24-
},
24+
"keywords": [
25+
"react",
26+
"ui",
27+
"themes",
28+
"switcher",
29+
"css"
30+
],
2531
"husky": {
2632
"hooks": {
2733
"pre-commit": "tsdx lint"
@@ -33,10 +39,19 @@
3339
"singleQuote": true,
3440
"trailingComma": "es5"
3541
},
36-
"name": "react-css-theme-switcher",
37-
"description": "Switch between CSS themes using React",
38-
"author": "Jfelix61",
42+
"author": "Jose R. Felix (https://jfelix.info)",
3943
"module": "dist/react-theme-switcher.esm.js",
44+
"repository": {
45+
"type": "git",
46+
"url": "https://github.com/JoseRFelix/react-css-theme-switcher"
47+
},
48+
"bugs": {
49+
"url": "https://github.com/JoseRFelix/react-css-theme-switcher/issues"
50+
},
51+
"homepage": "https://github.com/JoseRFelix/react-css-theme-switcher#readme",
52+
"peerDependencies": {
53+
"react": ">=16"
54+
},
4055
"devDependencies": {
4156
"@testing-library/react-hooks": "^3.3.0",
4257
"@types/react": "^16.9.38",

0 commit comments

Comments
 (0)