{"_id":"@blueromans/react-theme-provider","_rev":"1-b35b27fc8e30a972efcea911a1dd1561","name":"@blueromans/react-theme-provider","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@blueromans/react-theme-provider","version":"0.0.1","description":"Theme provider for react and react-native applications","main":"./lib/index.js","typings":"./typings/index.d.ts","scripts":{"flow":"flow","typescript":"tsc","lint":"eslint .","prepare":"babel src --out-dir lib --source-maps --delete-dir-on-start && flow-copy-source src lib"},"repository":{"type":"git","url":"git+https://github.com/blueromans/react-theme-provider.git"},"keywords":["react","react-native","theme","provider"],"author":"","license":"MIT","bugs":{"url":"https://github.com/blueromans/react-theme-provider/issues"},"homepage":"https://github.com/blueromans/react-theme-provider#readme","devDependencies":{"@babel/cli":"^7.19.3","@babel/core":"^7.20.2","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/preset-env":"^7.20.2","@babel/preset-flow":"^7.18.6","@babel/preset-react":"^7.18.6","@types/react":"^18.0.25","eslint":"^8.26.0","flow-bin":"^0.192.0","flow-copy-source":"^2.0.9","prettier":"^2.7.1","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^4.8.4"},"peerDependencies":{"react":">=16.3.0"},"dependencies":{"deepmerge":"^4.2.2","hoist-non-react-statics":"^3.3.2"},"jest":{"moduleNameMapper":{"\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"},"testPathIgnorePatterns":["/node_modules/","/typings/"]},"gitHead":"2db6967401f72956f9fc7fb8c135cfc2c01d4f02","_id":"@blueromans/react-theme-provider@0.0.1","_nodeVersion":"16.14.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-1YMVAPwr9GKJvNVebzroO8I+bxUFQaIVWBhZ2oFnTqmYWqQkdc9rRc/9YDlUvFx2dcsi4neSSsfjOTcQMDTjOw==","shasum":"bfe7ec0ee18a85462557ba512dd53aa7714db3ca","tarball":"https://registry.npmjs.org/@blueromans/react-theme-provider/-/react-theme-provider-0.0.1.tgz","fileCount":20,"unpackedSize":29267,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzK9bAYbljkwsf4R7SCoqMiucz8F+GtyH991TQ4T9YUwIgIr4Ap7+9xZCrO7yCuceBFkXP8BL8RXFEXUTvyTv6H6A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZoDIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowaQ/9Ei4VUtBeEm32HOBlsRnc2agIPAR1LBrMt1DVMmLgEXwFk9V7\r\nY/iyWGTCzn2hu/3p/W7BBAWtMTnZF3ES0+fxv831nZVJ8enU9ummYFbWnEuV\r\nNDbyljksR5EXSLTgKFmqZMGJISoMr/iephS0dAkOSgNvaZuwrHaSmw31xePV\r\nRYscvLUi5N/IMnKgYLxP5WWdCM53GPLd+0/S/mClJkut3hzjQLF4zcq66wft\r\nMNzWxftmA3/SL5qOT4iV6u/K3m37bner9GgMeM3ddifYDI5TNRYVg5DVVPnJ\r\nKIF4iovJWDrkCRMSCO0XQ38rHJ/neckl6SWHHwwo5Ww4uNdIKy5DhfXQvgHY\r\nTolvcQKD9qZkiWnKElH0MZLrAKm+EtnVy0nBr/KPt2I8saHlvajkETT+Tn9f\r\noL9vhIE0baKTBzzif+/jBqOvf8CFbxWS+9f9SWW9uHYXwvbvs0w2ag7k6/aD\r\nfjkVghJyDYRerfD1RdBKZfR4TT4FWo5w5PxjsncrtnEPBpcLmbnFD4CU0pQm\r\npGnFYQM3ds9Zaou9uflFF8fzpIYZe99FFKpYY3dICTpPFBkRZLcAwHSzDenh\r\ns0gdjcopT+zziZMyW27BXztNCaublJSfnipZ8pstcBdcpqwSH37pif5EOI9T\r\nuOiRu6nXQZ4TSOXu3DFM2Tr/w3hvdxu47KE=\r\n=MMBk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"blueromans","email":"blueromans@hotmail.com"},"directories":{},"maintainers":[{"name":"blueromans","email":"blueromans@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-theme-provider_0.0.1_1667662024253_0.40214360779777647"},"_hasShrinkwrap":false},"0.0.2":{"name":"@blueromans/react-theme-provider","version":"0.0.2","description":"Theme provider for react and react-native applications","main":"./lib/index.js","typings":"./typings/index.d.ts","scripts":{"flow":"flow","typescript":"tsc","lint":"eslint .","prepare":"babel src --out-dir lib --source-maps --delete-dir-on-start && flow-copy-source src lib"},"repository":{"type":"git","url":"git+https://github.com/blueromans/react-theme-provider.git"},"keywords":["react","react-native","theme","provider"],"author":"","license":"MIT","bugs":{"url":"https://github.com/blueromans/react-theme-provider/issues"},"homepage":"https://github.com/blueromans/react-theme-provider#readme","devDependencies":{"@babel/cli":"^7.19.3","@babel/core":"^7.20.2","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/preset-env":"^7.20.2","@babel/preset-flow":"^7.18.6","@babel/preset-react":"^7.18.6","@types/react":"^18.0.25","eslint":"^8.26.0","flow-bin":"^0.192.0","flow-copy-source":"^2.0.9","prettier":"^2.7.1","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^4.8.4"},"peerDependencies":{"react":">=16.3.0"},"dependencies":{"deepmerge":"^4.2.2","hoist-non-react-statics":"^3.3.2"},"jest":{"moduleNameMapper":{"\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"},"testPathIgnorePatterns":["/node_modules/","/typings/"]},"gitHead":"e3835d4a76b0a35fe804e4c425bc0df92b75acae","_id":"@blueromans/react-theme-provider@0.0.2","_nodeVersion":"16.14.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-X/xYq7JZQ+um9rNvMIMYwD/J62VB3yVatXYTmjiFXl6/YTkoJV0r9u3AcKApheaRXWCdX+XcVI1llTV0RUDTEA==","shasum":"81678633cbbee04ae74145eff766b32cc4c9ee33","tarball":"https://registry.npmjs.org/@blueromans/react-theme-provider/-/react-theme-provider-0.0.2.tgz","fileCount":20,"unpackedSize":29189,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8X6c6NTLx2wvY98nc9JLBz0bLXfvbH41RESViYGJ2/wIhAKxBquG8HGAspbxGZqBJ78NHDrWsMBOAkFbmZivyqM+2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZoF4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrStA//XMF17eIZVHYqsNz7o3qO6BhVSVIOyI8pqHEVJyEtiFgoYzcO\r\nbCz+1zWgXb0mLbAOAHegXaJOmIkRYF+kREKlfEXeYBgdyzVVnswax5Awqh3t\r\nfZO1iv7jDmekXz0ajruHRHbwXIa5moylzLkAKoMeR9Fm1I9eiTEqdiOz/Buu\r\nhGISP+Dv6aaPQxv6lmuG+wXZeaH55pMOwlZpGp1f23C14YE5gxJqldAEAsiX\r\nPbx0dy0KF3vinHO8ZnGv0QAWcwvYu4KX+9Kxn9JXihOxX8+4LICDlmWPyE4V\r\nNtSCSI8U/PWyk3Zj9hEg5kXczACH78FXPM0vb2ga56ps3O3h29aoJEBr/Nnz\r\nFL7eacoFDlJlg2sA4iZFrkbrxi/m598ORKOhjUx/mhYQOuNFCjC8ZLDijjsF\r\nv43gqYZN523UpGkWBjUOlEltuj0UH9bp9UGmYSxdVmeqKicnshVOpHnQ84WX\r\neBodKnzgN08Mdl4RgwkrAx9tZ3ezxeas1/eA3jxm9EJ2ooNA9vm86KocLJkR\r\niiyYn5JgwoGliFIjqPxOxLj96EsE5SdJPRXdON+VdOURyqSPDd1eWaDcqYZU\r\n7pDwh7BQkT5Pyx+KWdxUJj3IBQKdfPMdF0iBHnpgCBkLMNoyGVH+A4aQmk2W\r\nNCImjqCnft93t9Rzx32nNl8Uocr4RhhylFw=\r\n=uY+p\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"blueromans","email":"blueromans@hotmail.com"},"directories":{},"maintainers":[{"name":"blueromans","email":"blueromans@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-theme-provider_0.0.2_1667662199938_0.8823484299889905"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-05T15:27:04.157Z","0.0.1":"2022-11-05T15:27:04.507Z","modified":"2022-11-05T15:30:00.197Z","0.0.2":"2022-11-05T15:30:00.122Z"},"maintainers":[{"name":"blueromans","email":"blueromans@hotmail.com"}],"description":"Theme provider for react and react-native applications","homepage":"https://github.com/blueromans/react-theme-provider#readme","keywords":["react","react-native","theme","provider"],"repository":{"type":"git","url":"git+https://github.com/blueromans/react-theme-provider.git"},"bugs":{"url":"https://github.com/blueromans/react-theme-provider/issues"},"license":"MIT","readme":"## About\n\n`@blueromans/react-theme-provider` is a set of utilities that help you create your own theming system in few easy steps.\nYou can use it to customize colors, fonts, etc.\n\n## Features\n\n- Works in **React** and **React Native**\n- `createTheming(defaultTheme)` - factory returns:\n  - `ThemeProvider` - component\n  - `withTheme` - Higher Order Component\n  - `useTheme` - React Hook\n\n## Getting started\n\n### Installation\n\n```sh\nnpm install --save @blueromans/react-theme-provider\n```\n\nor using yarn\n\n```sh\nyarn add @blueromans/react-theme-provider\n```\n\n### Usage\n\nImport `createTheming` from the library to create a theming object.\n\n```js\nimport { createTheming } from '@blueromans/react-theme-provider';\n\nconst { ThemeProvider, withTheme, useTheme } = createTheming(defaultTheme);\n```\n\nThen wrap your code in `ThemeProvider` component to make it available to all components.\n\n```js\n<ThemeProvider>\n  <App />\n</ThemeProvider>\n```\n\nYou can access the theme data in your components by wrapping it in `withTheme` HOC:\n\n```js\nclass App extends React.Component {\n  render() {\n    return <div style={{ color: props.theme.primaryColor }}>Hello</div>;\n  }\n}\n\nexport default withTheme(App);\n```\n\nAnother usage for functional component:\n\n```js\nconst App = ({ theme }) => (\n  <div style={{ color: theme.primaryColor }}>\n    Hello\n  </div>\n);\n\nexport withTheme(App);\n```\n\nYou can also use the [hooks](https://reactjs.org/docs/hooks-intro.html) based API:\n\n```js\nfunction App() {\n  const theme = useTheme();\n\n  return <div style={{ color: theme.primaryColor }}>Hello</div>;\n}\n```\n\n### Injected props\n\nIt will inject the following props to the component:\n\n- `theme` - our theme object.\n- `getWrappedInstance` - exposed by some HOCs like react-redux's `connect`.\n  Use it to get the ref of the underlying element.\n\n### Injecting theme by a direct prop\n\nYou can also override `theme` provided by `ThemeProvider` by setting `theme` prop on the component wrapped in `withTheme` HOC.\n\nJust like this:\n\n```js\nconst Button = withTheme(({ theme }) => (\n  <div style={{ color: theme.primaryColor }}>Click me</div>\n));\n\nconst App = () => (\n  <ThemeProvider theme={{ primaryColor: 'red' }}>\n    <Button theme={{ primaryColor: 'green' }} />\n  </ThemeProvider>\n);\n```\n\nIn this example Button will have green text.\n\n## `createTheming`\n\n**type:**\n\n```js\n<T, S>(defaultTheme: T) => {\n  ThemeProvider: ThemeProviderType<T>,\n  withTheme: WithThemeType<T, S>,\n}\n```\n\nThis is more advanced replacement to classic importing `ThemeProvider` and `withTheme` directly from the library.\nThanks to it you can create your own ThemeProvider with any default theme.\n\nReturns instance of `ThemeProvider` component and `withTheme` HOC.\nYou can use this factory to create a singleton with your instances of `ThemeProvider` and `withTheme`.\n\n> **Note:** `ThemeProvider` and `withTheme` generated by `createTheming` always will use different context so make sure you are using matching `withTheme`!\n> If you acidentially import `withTheme` from `@blueromans/react-theme-provider` instead of your theming instance it won't work.\n\n### Arguments\n\n- `defaultTheme` - default theme object\n\n### Benefits\n\n- Possibility to define `flow` types for your theme\n- Possibility to pass default theme\n- You can use multiple `ThemeProvider`s in your app without any conflicts.\n\n### Usage\n\n```js\n// theming.js\nimport { createTheming } from '@blueromans/react-theme-provider';\nconst { ThemeProvider, withTheme } = createTheming({\n  primaryColor: 'red',\n  secondaryColor: 'green',\n});\nexport { ThemeProvider, withTheme };\n\n//App.js\nimport { ThemeProvider, withTheme } from './theming';\n```\n\n### Helpers\n\n#### `ThemeProvider`\n\n**type:**\n\n```js\ntype ThemeProviderType<Theme> = React.ComponentType<{\n  children: React.Node,\n  theme?: Theme,\n}>;\n```\n\nComponent you have to use to provide the theme to any component wrapped in `withTheme` HOC.\n\n##### Props\n\n-`theme` - your theme object\n\n#### `withTheme`\n\n**type:**\n\n```js\ntype WithThemeType<Theme> = React.ComponentType<{ theme: Theme }>\n```\n\nHigher Order Component which takes your component as an argument and injects `theme` prop into it.\n\n#### `useTheme`\n\n**type:**\n\n```js\ntype UseTheme = (overrides?: PartialTheme) => Theme;\n```\n\nHook which takes theme overrides and returns a theme object.\n\nExample:\n\n```js\nfunction App(props) {\n  const theme = useTheme(props.theme);\n\n  return <div style={{ color: theme.primaryColor }}>Hello</div>;\n}\n```\n\n## Applying a custom theme to a component\n\nIf you want to change the theme for a certain component, you can directly pass the theme prop to the component. The theme passed as the prop is merged with the theme from the Provider.\n\n```js\nimport * as React from 'react';\nimport MyButton from './MyButton';\n\nexport default function ButtonExample() {\n  return <MyButton theme={{ roundness: 3 }}>Press me</MyButton>;\n}\n```\n","readmeFilename":"README.md"}