How to use the react-cosmos/fixture.useValue function in react-cosmos
To help you get started, we’ve selected a few react-cosmos examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
react-cosmos / react-cosmos / packages / react-cosmos-playground2 / src / plugins / FixtureSearch / FixtureSearchOverlay.fixture.tsx View on Github 
return () => {
const [searchText, setSearchText] = useValue('searchText', {
defaultValue: ''
});
return (
console.log('Close fixture search overlay')}
onSelect={selectedFixtureId =>
console.log('Select fixture', selectedFixtureId)
}
/>
);return () => {
const [
selectedFixtureId,
setSelectedFixtureId
] = useValue('selectedFixtureId', { defaultValue: fixtureId });
const [treeExpansion, setTreeExpansion] = useValue('treeExpansion', {
defaultValue: initialTreeExpansion
});
return (
);
};
}export default () => {
const [count, setCount] = useValue('count', { defaultValue: 0 });
return (
setCount(prevCount => prevCount + 1)}
/>
);
};export default () => {
const [string] = useValue('string', { defaultValue: 'How are you doing?' });
const [number] = useValue('number', { defaultValue: 1989 });
const [boolean] = useValue('boolean', { defaultValue: true });
const [object] = useValue('object', {
defaultValue: { isAdmin: true, name: 'Pat D', age: 44 }
});
const [array] = useValue('array', {
defaultValue: [
{ isAdmin: true, name: 'Pat D', age: 44 },
{ isAdmin: false, name: 'Dan B', age: 39 }
]
});
return (export default () => {
const [string] = useValue('string', { defaultValue: 'How are you doing?' });
const [number] = useValue('number', { defaultValue: 1989 });
const [boolean] = useValue('boolean', { defaultValue: true });
const [object] = useValue('object', {
defaultValue: { isAdmin: true, name: 'Pat D', age: 44 }
});
const [array] = useValue('array', {
defaultValue: [
{ isAdmin: true, name: 'Pat D', age: 44 },
{ isAdmin: false, name: 'Dan B', age: 39 }
]
});
return (export default () => {
const [viewport, setViewport] = useValue('viewport', {
defaultValue: initialViewport
});
const [scaled, setScaled] = useValue('scaled', { defaultValue: false });
const scaleFactor = getViewportScaleFactor(viewport, containerViewport);
return (
<header> setScaled(!scaled)}
/>
);
};
</header>}
},
currentValue: {
type: 'object',
values: {
isAdmin: { type: 'primitive', value: true },
name: { type: 'primitive', value: 'Pat D' },
age: { type: 'primitive', value: 45 }
}
}
}
}
}
}
);
const [treeExpansion, setTreeExpansion] = useValue('treeExpansion', {
defaultValue: {}
});
return (
);
};export default () => {
const [fixtureState, setFixtureState] = useValue(
'fixtureState',
{
defaultValue: {
values: {
string: {
defaultValue: { type: 'primitive', value: 'hello world' },
currentValue: { type: 'primitive', value: 'hello world' }
},
number: {
defaultValue: { type: 'primitive', value: 1337 },
currentValue: { type: 'primitive', value: 1337 }
},
boolean: {
defaultValue: { type: 'primitive', value: false },
currentValue: { type: 'primitive', value: false }
},type: 'unserializable',
stringifiedValue: '<div>'
}
}
},
string: {
type: 'primitive',
value: 'hello world'
},
number: {
type: 'primitive',
value: 1337
}
}
});
const [treeExpansion, setTreeExpansion] = useValue(
'treeExpansion',
{ defaultValue: { object: true } }
);
return (
);
};
</div>export default () => {
const [string] = useValue('string', { defaultValue: 'How are you doing?' });
const [number] = useValue('number', { defaultValue: 1989 });
const [boolean] = useValue('boolean', { defaultValue: true });
const [object] = useValue('object', {
defaultValue: { isAdmin: true, name: 'Pat D', age: 44 }
});
const [array] = useValue('array', {
defaultValue: [
{ isAdmin: true, name: 'Pat D', age: 44 },
{ isAdmin: false, name: 'Dan B', age: 39 }
]
});
return (
);
};react-cosmos
Sandbox for developing and testing UI components in isolation
