Conditional Wrapper

README.md

Conditional Wrapper

This Gist was generated by Contrived.

Do not modify the metadata file if you want to open in Contrived again. Otherwise, it is safe to delete.

Happy Hacking!

contrivedExperimentMetadata.json

{"user":"5f0c542a4a2ce5e528e01fdf","templateVersion":"1","templateId":"reactjs","resources":["<meta charset=\"UTF-8\" />","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">"],"dependencies":[{"name":"react","version":"16.13.1","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"},{"name":"react-dom","version":"16.13.1","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"},{"name":"react-is","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/react-is/16.13.1/umd/react-is.production.min.js","version":"16.13.1"},{"name":"styled-components","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.2.0/styled-components.min.js","version":"5.2.0"}],"files":[{"id":1,"parentId":0,"name":"public","path":"/public","type":"folder","isRoot":true,"selected":false,"expanded":false,"children":[{"id":2,"name":"index.html"}]},{"id":2,"parentId":1,"name":"index.html","path":"/src/index.html","type":"file","mimeType":"html","isRoot":false,"open":true,"selected":false,"content":""},{"id":3,"parentId":0,"name":"src","path":"/src","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":4,"name":"index.js"},{"id":5,"name":"styles.css"}]},{"id":4,"parentId":3,"name":"index.js","path":"/src/index.js","type":"file","mimeType":"es6","isRoot":false,"open":true,"selected":true,"content":""},{"id":5,"parentId":3,"name":"style.css","path":"/src/style.css","type":"file","mimeType":"css","isRoot":false,"open":true,"selected":false,"content":""}],"experimentId":"5f7b87725556113114e18d8c"}

css.css

.App {
	font-family: sans-serif;
	text-align: center;
}

html.html

<div id="root"></div>

javascript.js

const { styled } = window;

const ConditionalWrapper = ({ condition, ifTrueWrapper, ifFalseWrapper, children }) => (condition ? ifTrueWrapper(children) : ifFalseWrapper(children));



const App = () => {

	const [darkTheme, setDarkTheme] = React.useState(false);

	return (
		<div className='App'>
		  <Row>
			  <button onClick={() => setDarkTheme(!darkTheme)}>Toggle Theme</button>
			</Row>
			<ConditionalWrapper
			  condition={darkTheme === true}
				ifTrueWrapper={children => <div style={{ background: '#000', color: '#fff' }}>{children}</div>}
				ifFalseWrapper={children => <div style={{ background: '#fff', color: '#000' }}>{children}</div>}
			>
				<h1>Hello Contrived!</h1>
				<h2>Start editing to create something magic!</h2>
			</ConditionalWrapper>
		</div>
	);
};


const Row = styled.div`
  display: flex;
	flex-direction: row;
  justify-content: flex-end;
	margin: 5px;
`;



ReactDOM.render(<App/>, document.getElementById('root'));