{"action":"created","issue":{"url":"https://api.github.com/repos/cssinjs/react-jss/issues/213","repository_url":"https://api.github.com/repos/cssinjs/react-jss","labels_url":"https://api.github.com/repos/cssinjs/react-jss/issues/213/labels{/name}","comments_url":"https://api.github.com/repos/cssinjs/react-jss/issues/213/comments","events_url":"https://api.github.com/repos/cssinjs/react-jss/issues/213/events","html_url":"https://github.com/cssinjs/react-jss/pull/213","id":306137368,"number":213,"title":"enhancing inject option to inject only part of theme as prop","user":{"login":"yash-bagadia","id":36981717,"avatar_url":"https://avatars0.githubusercontent.com/u/36981717?v=4","gravatar_id":"","url":"https://api.github.com/users/yash-bagadia","html_url":"https://github.com/yash-bagadia","followers_url":"https://api.github.com/users/yash-bagadia/followers","following_url":"https://api.github.com/users/yash-bagadia/following{/other_user}","gists_url":"https://api.github.com/users/yash-bagadia/gists{/gist_id}","starred_url":"https://api.github.com/users/yash-bagadia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yash-bagadia/subscriptions","organizations_url":"https://api.github.com/users/yash-bagadia/orgs","repos_url":"https://api.github.com/users/yash-bagadia/repos","events_url":"https://api.github.com/users/yash-bagadia/events{/privacy}","received_events_url":"https://api.github.com/users/yash-bagadia/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":12,"created_at":"2018-03-17T07:55:28Z","updated_at":"2018-03-19T15:08:39Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/cssinjs/react-jss/pulls/213","html_url":"https://github.com/cssinjs/react-jss/pull/213","diff_url":"https://github.com/cssinjs/react-jss/pull/213.diff","patch_url":"https://github.com/cssinjs/react-jss/pull/213.patch"},"body":"By default theme is injected as prop to component. But in the options to injectSheet\r\nwe can whitelist props to be injected with 'inject' property. However, if we want to inject only some part\r\nof theme as prop there is no way. So adding one more key to inject option to give\r\nthe flexibility to inject only part of theme. \r\nSo lets take an example component where we are consuming a property 'height' and we want to provide flexibility where property can directly be passed to the component or at a global level as part of theme so that all component instances will get the same value for that property. \r\n```javascript\r\nconst Example = props => {\r\nconst height = props.height || props.theme.ButtonBase.height; //give priority to props.height\r\n//as it is passed specific to this instance\r\n  return <div> value of height is {height} </div>;\r\n};\r\n```\r\nWhile this works, there are two problems with this approach: \r\n\r\n1. Entire theme object is passed to the component which might be huge and the component required\r\nonly few of the properties.\r\n2. For each of the property that we are allowing to be defined in theme, we will end up writing code\r\nlike:\r\n```javascript\r\nprops.height || props.theme.ButtonBase.height\r\n```\r\nwhich makes the code look ugly and difficult to maintain.\r\n\r\nBy providing the provision to inject only part of theme as prop to the component, we solve\r\nboth of the above problems. Only required properties will be injected making props\r\nobject small.\r\nSecondly, for each property  we just need to consume it like:\r\n```javascript\r\nprops.height\r\n```\r\nand createHoc takes care of overriding theme passed prop if prop is passed to component\r\ninstance and it makes the code look independent of theme and easy to maintain.\r\nOne more advantage of extending inject option to provide what property to inject still\r\nkeeps react-jss code unaware of theme object and independent of it.\r\n\r\nWith this change we extend inject option to accept an object as well as one of the elements in the array with key 'themeProps' and its value will be the property path of the part required to be injected in the component as prop.\r\n\r\n**Sample Usage:**\r\n```javascript\r\nconst styles = {\r\ncolor: 'red'\r\n}\r\nconst Example = props => {\r\n  const height = props.height;\r\n  return <div> value of height is {height} </div>;\r\n};\r\nexport injectSheet(styles, {inject: ['classes', {themeProps: 'ButtonBase'}]})(Example)\r\n//and if we render this Example component wrapped with ThemeProvider:\r\n<ThemeProvider theme={{color: 'blue', ButtonBase: {height: 10, width:20}}}><Example /> </ThemeProvider>\r\n//height and width will be injected to props of Example\r\n//Output will be: value of height is 10\r\n```\r\nProperty passed to component instance will override property passed by theme:\r\n```javascript\r\nexport injectSheet(styles, {inject: ['classes', {themeProps: 'ButtonBase'}]})(Example)\r\n<ThemeProvider theme={{color: 'blue', ButtonBase: {height: 10, width:20}}}><Example height=30/> </ThemeProvider>\r\n//width and height will be injected to props of Example\r\n//output will be: value of height is 20\r\n```\r\nWe can also pass path of a nested property in theme object to be injected as prop:\r\n```javascript\r\nexport injectSheet(styles, {inject: ['classes', {themeProps: 'a.b.c'}]})(Example)\r\n//so if theme object look like:\r\n  theme = {\r\n    color: 'red',\r\n    a: {\r\n      b: {\r\n        c: {\r\n          p: 10,\r\n          q: 20\r\n        }\r\n      }\r\n    }\r\n  }\r\n//p and q will be injected to props of Example.\r\n```\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/cssinjs/react-jss/issues/comments/374245849","html_url":"https://github.com/cssinjs/react-jss/pull/213#issuecomment-374245849","issue_url":"https://api.github.com/repos/cssinjs/react-jss/issues/213","id":374245849,"user":{"login":"kof","id":52824,"avatar_url":"https://avatars0.githubusercontent.com/u/52824?v=4","gravatar_id":"","url":"https://api.github.com/users/kof","html_url":"https://github.com/kof","followers_url":"https://api.github.com/users/kof/followers","following_url":"https://api.github.com/users/kof/following{/other_user}","gists_url":"https://api.github.com/users/kof/gists{/gist_id}","starred_url":"https://api.github.com/users/kof/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kof/subscriptions","organizations_url":"https://api.github.com/users/kof/orgs","repos_url":"https://api.github.com/users/kof/repos","events_url":"https://api.github.com/users/kof/events{/privacy}","received_events_url":"https://api.github.com/users/kof/received_events","type":"User","site_admin":false},"created_at":"2018-03-19T15:08:39Z","updated_at":"2018-03-19T15:08:39Z","author_association":"OWNER","body":"Lets see if we get some 👍 on this, if yes, we can consider implementing it."}}
{"actor":{"display_login":"kof"}}